Cara Memasang Prism Syntax Highlighter di Blog

Cara memasang atau membuat Prism Syntax Highlighter di Blog

Prism Syntax Highlighter adalah sebuah kolom yang dapat diisi dengan berbagai macam kode yang berwarnai-warni sesuai dengan kode itu sendiri. Dulu saya dipusingkan untuk membuat Prism Syntax Highlighter dengan berbagai cara, bukan karena tidak tahu code atau scriptnya namun kata kunci yang saya gunakan untuk menemukan Prism. Dulu saya menggunakan kata kunci seperi Cara membuat kolom untuk script di posting blog, Cara membuat kotak untuk kode di posting blog dan cara membuat bingkai untuk tulisan script kode di posting blog. Haha... Semua yang tampil bukan seperti yang saya inginkan. Akhirnya setelah mengamati dan sering berkunjung ke blog Mbak Arlina, saya baru bisa membuat Prims Syntax Highlighter yang saya inginkan.

Ternyata untuk membuat Prism Syntax Highlighter di posting blog itu tidak sesulit yang saya bayangkan. Karena hanya dengan beberapa langkah saja kita sudah mempunyai sebuah kolom/kotak/bingkai Prism Syntax Highlighter terpampang indah di posting. Hehe...

Mari kita mulai untuk membuat Prism Syntax Highlighter di blog agar kode-kode atau script yang ingin kita bagikan mudah untuk di copy atau indah dilihat.

1.  Masuk ke blogger lalu masuk ke Perancangan dan arahkan ke Template dan klik Edit HTML. Setelah itu cari kode seperti berikut </style> dan terapkan kode CSS di bawah ini sebelum kode </style>.

 
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

2.  Setelah selesai menempatkan kode CSS di atas, sekarang saatnya menerapkan kode JavaScript dan JQuery. Copy dan paste tiga kode di bawah ini sebelum </body> atau </head>

Done! Sekarang Prism Syntax Highlighter telah sukses terpasang di blog kamu. Untuk menggunakan Prism Syntax Highlighter di Posting blog, silahkan terapkan kode berikut di dalam posting. Untuk menerapkan kode Prism di posting blog, pilihlah mode Compose dan paste salah satu dari kode di bawah ini. Misalnya kamu ingin membagi kode HTML, maka pilihlah kode HTML, jika kamu ingin membagi kode JavaScript di posting blog, maka pilihlah kode JavaScript.  Sesuaikan dengan kode apa yang ingin kamu bagi di post blog.

 
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Jika kamu mengalami kesulitan, silahkan berkomentar. Mana tahu saya bisa bantu. Hehe... Terima kasih.

Source:  http://arlinadesign.blogspot.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html