Cara Memasang Syntax Highlighter di Blogger

Kamu pernah lihat sebuah blog tutorial yang menampilkan kode warna-warni? Ya, itu adalah Syntax Highlighter. Dengan menggunakan Syntax Highlighter, kita bisa menampilkan kode berupa HTML, CSS, PHP, JavaScript atau yang lainnya dalam bentuk kode dengan warna-warni dan dengan susunan karakter yang tersusun rapi.

Kebetulan, kali ini akan dibahas tentang cara memasang Syntax Highlighter di blog berplatform Blogger. Syntax Highlighter ini sangat cocok untuk blog-blog dengan niche tutorial, web design, dan blog-blog dengan tema seputar coding.

Langkah pertama :

Pertama-tama yang harus kamu lakukan adalah masuk ke menu template editor. lalu salin kode CSS berikut dan paste kode tersebut sebelum atau diatas kode ]]></b:skin>. Berikut CSS yang harus disalin:

/*Syntax Highlighter*/
pre {
    padding: .8em 1em;
    margin: 0.5em 0;
    background-color: #2F3741;
    border: 1px solid #ddd;
    font-size: 13px;
    color: #000;
    font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, Monospace;
    line-height: 1.4em;
    position: relative;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    max-height: 200px;
}
code {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, Monospace;
    font-size: 13px;
    color: #d14;
}
#comment-holder code {
    color: #e59304;
}

pre code {
    padding: 0!important;
    color: #839496;
    background: none!important;
    border: none!important;
    display: block;
}
pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc {
    color: #93a1a1;
    font-style: italic;
}
pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title {
    color: #F5821E;
}
pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
    color: #008800;
}
pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function {
    color: #268bd2;
}
pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type {
    color: #A2886F;
}
pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title, pre .css .pseudo {
    color: #000;
    font-weight: bold;
}
pre .deletion {
    color: #dc322f;
}
pre .tex .formula {
    background: #eee8d5;
}

Langkah Kedua

Selanjutnya, masih di template HTML editor. Temukan kode </head> dan letakkan kode berikut diatasnya.

<!-- Syntax Highlighter -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/KompiAjaib/js/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Langkah Ketiga :

Selanjutnya, kamu harus menemukan kode </body> dan letakkan kode berikut di atasnya.

<!-- Syntax Highlighter JS -->
<script type='text/javascript'>
//<![CDATA[
$("#comment-holder").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
        return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('i[rel="image"]', this).replaceWith(function () {
        return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
    });
    $('b[rel="quote"]', this).replaceWith(function () {
        return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>
<!-- Syntax Highlighter JS End -->

Setelah itu simpan template kamu. Sekarang akan saya jelaskan cara menggunakannya.

Cara Penggunaan

Untuk cara penggunaan Syntax Highlighter ini sangatlah mudah, kamu hanya perlu menuliskan kode :

<pre><code>
.........................................................
.........................................................
<!-- Kode yang sudah di Parse di letakkan disini -->
.........................................................
.........................................................
</code></pre>

Untuk menyisipkan kode, gambar, dan blockquote pada komentar, masukkan kode berikut jika kamu ingin menyisipkannya pada komentar:
1. Untuk memasukkan tag kode pendek masukkan :

<i rel="code">Tulis kode yang sudah diparse di sini</i>

2. Untuk memasukkan tag kode panjang masukkan :

<i rel="pre">Tulis kode yang sudah diparse di sini</i>

3. Untuk memasukkan blockquote, masukkan :

<b rel="quote">Tulis catatan di sini</b>

4. Untuk memasukkan gambar, masukkan :

<i rel="image">Tulis URL gambar di sini</i>

Ingat, kode yang akan ditampilkan harus sudah di parse, dan ketika menulis artikel harus menggunakan versi HTML, bukan COMPOSE. Untuk mengetahui bagaimana cara mem-parse kode akan saya kasih tau pada artikel selanjutnya. Terimakasih.