Cara Memasang Syntax Highlighter di Blogspot

Get extra 15% OFF Stellar and StellarPlus 1yr Hosting Packages

Artikel Terkait

Berbicara tentang Syntax Highlightertentunya tidak akan lepas dari kode rumit yang terdapat dalam sebuah Blog atau editor source code bahasa pemrograman. Apa sebenarnya yang dimaksud dengan Syntax highlighter dan apa fungsinya? saya akan mencoba menerjemahkan arti Syntax highlighter dalam pengertian saya. Syntax highlighter menurut saya adalah fitur khusus untuk proses pemindahan sebuah code bahasa pemrograman tertentu dimana tulisan, warna teks, posisi sama persis dengan yang terdapat di sebuah code bahasa pemrograman untuk di pindahkan atau di copy ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajari.
Syntax highlighter hampir sama dengan fitur Blockquote namun bedanya untuk fitur blockquote warna tulisan biasanya hanya satu warna saja, untuk mengubah warna sesuai dengan kode aslinya harus dilakukan secara manual. Jadi intinya Syntax highlighter lebih efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote. Untuk memasang fitur Syntax Highlighter di WordPress terutama wordpress berbayar dan blog student sangatlah mudah hanya perlu menginstal plugin Syntax Highlighter yang sudah tersedia. Sementara untuk blog berplatfrom blogspot relatif sedikit sulit. Untuk Anda yang ingin menggunakan fitur Syntax Highlighter ke dalam blogspot berikut kami berikan penjelasan lengkapnya. Silahkan masuk ke dasbord blogspot pilih template > edit HTML > cari kode ]]>, untuk mencari kode ini klik mouse tepat di kotak kode HTML- pada keybord tekan Ctrl+F, setelah muncul kolom search pastekan kode ]]> ke dalam kotak kemudian tekan enter. Setelah kode ]]> ketemu masukkan atau paste code berikut in tepat diatas kode ]]>.

  CSS

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
} 

Langkah selanjutnya cari kode , untuk mencari kode ini lakukan proses yang sama seperti mencari kode ]]>, pastekan kode dibawah ini tepat di atas kode .

JAVA SCRIPT
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>. 

sampai disini proses selesai, simpan template terlebih dahulu. Untuk menerapkan pemasangan Syntax Highlighter di postingan blogspot, caranya pada menu postingan, klik HTML sebelah menu compose. Setelah itu pastekan kode dibawah ini.

HTML
<pre class='code code-html'><label>HTML</label><code>
Masukan Kode HTML Anda Di Sini
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
Masukan Kode CSS Anda Di Sini
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
Masukan Kode Javascript Anda Di Sini
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
Masukan Kode Jquery Anda Di Sini
</code></pre>