Skip to main content

Cara Memasang Syntax Highlighter Terbaru di Blogger

Cara Memasang Syntax Highlighter Terbaru di Blogger

Kali ini analisyuki.com akan membagikan tutorial cara terbaru memasang kotak kode (coding box) berwarna (warna-warni) di dalam postingan blogger terbaru.

Pasti kalian pernah melihat blogger yang memasukkan kode-kode di dalam postingan blogger mereka dengan dibungkuskan kotak berwarna hitam dan dengan teks warna-warni di dalamnya, nah kota kode itu biasa disebut dengan nama syntax highlighter.

Sebenarnya sudah banyak blogger yang membuat tutorial ini, namun kali ini saya akan membagikan dengan versi terbaru dari highlight.js dengan versi 9.15.10 dan saya memodifikasinya dengan warna yang berbeda agar tidak terlihat membosankan dan tampak lebih keren.

Bagi kalian yang baru pertama kali membuat tutorial blogger dan tidak tau cara menerapkan kode-kode dalam postingan blog saya akan membahasnya secara lengkap disini.

Cara Memasang Syntax Highlighter Versi Terbaru di Blogger

1. Pilih Tema, pilih Titik 3 , kemudian pilih Edit HTML

Cara Memasang Syntax Highlighter Terbaru di Blogger

2. Letakkan kode dibawah ini tepat berada diatas kode ]]></b:skin> atau </style>

/* Highlighter New */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:4px;background-color:#25282d;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#282829;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#64cdf9}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#2ed573}.post-body .hljs-string,.post-body .hljs-bullet{color:#90f790}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#00c4c0}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#ef6259}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#ffdf6f}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#beaaec}.post-body .hljs-meta{color:#f69a9a}.post-body .hljs-deletion{background-color:#f69a9a;color:#333}.post-body .hljs-addition{background-color:#90f790;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#fa4040;color:#fff;padding:1.5px 4px;border-radius:3px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}

3. Kemudian tambahkan kode berikut ini, tepat diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/analisyuki/js@master/highlightnew.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Kemudian pilih Simpan

Itulah tadi cara memasang kotak kode di dalam postingan blogger, sebelum memasang kode diatas alangkah baiknya kita menghapus terlebih dahulu pre code yang lama pada template blog kalian tampilan syntax highlighter versi terbaru ini dapat tampil dengan baik di blog kalian.

Bagi kalian yang ingin menerapkan kode ini di dalam postingan blogger kalian berikut tutorialnya:

Cara Menerapkan Syntax Highlighter di dalam Postingan Blogger

1. Buat postingan baru, pilih tab menu HTML (bukan Compose)

Cara Memasang Syntax Highlighter Terbaru di Blogger

2. Gunakan kode ini untuk membuat syntax highlighter

<pre><code>MASUKKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>

3. Masukkan kode cc/html/js kalian di cetak biru tersebut, namun sebelum memasukkan kode alangkah baiknya melakukan Parse HTML agar kode yang dapat ditampilkan dengan baik di dalam postingan blog

Bagi yang belum paham berikut gambar animasinya:

Cara Memasang Syntax Highlighter Terbaru di Blogger

Itulah tadi cara membuat kotak kode di dalam postingan blogger dan analisyuki.com, semoga tutorial ini dapat bermanfaat dan memperkeren tampilan postingan kalian terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar