Cara Mudah Membuat Syntax Highlighter Berwarna di Blog

Syntax Highlighter atau kotak script - berfungsi sebagai media penandaan agar memiliki pembeda dari teks umum lainnya yang ada dalam sebuah halaman blog atau website. Misalnya difungsikan untuk menandai JavaScript, CSS, dan sebagainya agar berbeda dari tulisan pada halaman postingan sahabat blogger. Syntax Highlighter atau kotak script yang saya bagikan, sama persis dengan yang saya gunakan pada blog ini. jadi sahabat blogger bisa melihat hasilnya langsung pada postingan saya di bagian bawah.

Sebelumnya perlu sahabat blogger ketahui bahwa, tidak semua template yang ada suport dengan Syntax ini, jika sobat menggunakan Template responsive atau tempalate yang dirilis Arlina Design maka dipastikan kotak script ini bekerja dengan baik.

Membahas mengenai keunggulan Syntax Highlighter atau kotak script ini, tentu akan berkontribusi penuh pada tampilan blog atau website sobat, sobat bisa buktikan sendiri dengan mencobanya. Dari segi design, kotak script ini sangat simpel dan tentunya mengutamakan design kerapian, dan dipadukan dengan warna-warna yang beragam menambah kesan indah pada tampilannya. Dengan kekontrasan warna pada setiap jenis kata dari text secript yang ditampilkan, akan membuat pengunjung blog sobat menjadi semakin betah dan menyukai blog sobat.

Berminat dan tertarik memasang Syntax Highlighter atau kotak script ini pada blog sobat? Ayo langsung saja kita praktekan sobat.

Panduan Membuat Syntax Highlighter Berwarna di Blog

1. Buka Dashboard blog sobat dan buka: Tema >> edit HTML >> kemudian sobat salin Script CSS berikut dan terapkan tepat sebelum </style>

/* CSS Highlighter */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#2c3641;color:#fff;line-height:1.5;font-size:13px}
.hljs-name,.hljs-strong{font-weight:normal}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#e67e22;color:#fff;}
.BLOG_mobile_video_class{display:none!important;}
.post-body a.img,.post-body .separator a {margin-left:0!important;margin-right:0!important;}

2. Selanjutnya sobat Salin Kode dibawah ini dan terapkan tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Google Url dan Syntax Highlighting
function downloadJSAtOnload(){!function(n){for(var o=0,d=n.length;d>o;++o){var t=document.createElement("script");t.src=n[o],document.body.appendChild(t)}}(["https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/googleshorturl.js","https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/highlightpro.js"])}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

3. Simpan template sobat.

Untuk memanggil Syntax Highlighter berfungsi pada pstingan sahabat blogger, silakan salin Kode berikut dan terapkan pada HTML postingan sobat.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-HTML">kode HTML (yang sudah di`Parse/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 (yang sudah di`Parse/escape`) di sini</code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> kode jQuery (yang sudah di`Parse/escape`)</code></pre>

Jika sobat ingin memasang kode HTML, JavaScript, dan JQuery, sobat harus mem-Parse atau menconvert kode tersebut kedalam escape karakter terlebih dahulu. Jika sobat belum tahu caranya sobat bisa baca artikel berikut.


4.  Panduan memasang kotak script selesai, sekarang sobat bisa lihat hasilnya.

Bagaimana sobat, mudah bukan? Jika ada yang tidak dimengerti pada panduan diatas dan ingin bertanya, sobat bisa tulis komentar pada kolom koment dibawah.
Terimakasih telah berkunjung sahabat blogger.

Source: Arlina Design