Cara Membuat Kotak Script / Syntax Highlighter Berwarna Di Blogger

Hallo sobat Blogger! Kali ini saya akan memposting artikel tentang cara membuat kotak script atau syntax highlighter. Dikalangan programmer, blogger atau penulis di website tentang html, css, javascript, jquery atau yang lainnya mungkin sudah tak asing lagi bagi mereka tentang kotak script / syntax highlighter ini. Bagi sobat yang belum tau fungsi dan wujudnya, mari kita simak pengertian berikut.

Apa itu Kotak Script / Syntax Highlighter?

Kotak Script atau Syntax Highlighter adalah kotak atau tempat sekaligus fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, script, atau markup, mulai dari HTML, CSS, PHP, JavaScript, jQuery  dan  sebagainya. Kotak script ini menampilkan teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman tersebut.

Dengan menggunakan syntax highlighter atau penyorotan sintaks, bahasa pemrograman lebih mudah dibaca dan nyaman dilihat oleh orang lain. Penggunaan syntax highlighter di blogger tentu sangat memang penting apalagi jika sobat membahas artikel mengenai berbagai macam bahasa pemrograman di blog sobat. 

Agar orang lain lebih mudah memahami dan membaca berbagai baris kode bahasa pemrograman maka akan lebih baik jika sobat memasang kotak script ini di blog. Berbagai kode yang sobat bagikan di postingan blog akan berubah warna-warni sehingga lebih terlihat keren dan rapi. Dan dapat menarik pengunjung blog sobat.

Selain untuk memudahkan pengunjung situs sobat membaca berbagai kode bahasa pemrograman, penggunaan syntax highlighting ini juga akan lebih membuat visitor nyaman dan tidak pusing ketika membaca atau melihat kode script yang sobat tulis di blog.

Bagaimana sob tertarik untuk membuatnya? Bagi sobat blogger yang tertarik untuk membuat syntax highlighter ini di blog, silahkan ikut langkah langkah berikut ini dengan benar dan teliti.

Cara Membuat Kotak Script / Syntax Highlighter di Blogger :

Untuk Demo sobat tinggal lihat aja kotak script yang saya gunakan saat ini.

• Pertama, masuk akun blogger sobat.
• Setelah di dashboard, pilih menu Template, Edit HTML.
• Copy script dibawah ini dan tempel di atas kode ]]></b:skin> atau </style>

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;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:300px}
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}
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}

• Lalu tambahkan script dibawah ini tepat di atas kode </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

• Save Template

Cara Menggunakan Syntax Highlighter :

Untuk penerapan di Blogger memang sangat mudah, ikuti langkah langkah berikut.

• Buka postingan sobat atau Entri Baru.
• Kemudian masuk ke bagian HTML bukan Compose.
• Lalu masukan tag berikut.

<pre><code>Masukan scriptnya disini</code></pre>

• Silahkan sobat ganti pada "Masukan scriptnya disini" menjadi script sobat.
• Tapi dengan syarat sobat harus mem-parse script HTMLnya di Tool Parse HTML.

• Tapi kalo markup CSS dan JavaScript sobat tidak perlu mem-parse HTML jika memungkinkan.

Sekian untuk artikel Cara Membuat Kotak Script / Syntax Highlighter Berwarna Di Blogger semoga bermanfaat dan selamat mencoba.