Cara Mudah Membuat Syntax Highlighter di Blog

Syntax highlighter adalah fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

Fitur ini menampilkan teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman itu sendiri.

Dengan menggunakan syntax highlighting atau penyorotan sintaks, bahasa pemrograman lebih mudah dibaca oleh manusia. 

Penggunaan syntax highlighter di blogger tentu sangat penting apalagi jika Anda membahas mengenai berbagai macam bahasa pemrograman di blog Anda mulai dari PHP, HTML, Java, dll

. 

Agar manusia lebih mudah memahami dan membaca berbagai baris kode bahasa pemrograman maka akan lebih baik apabila Anda memasang syntax highlighter ini di blog. 

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

Bagi Anda yang tertarik untuk membuat syntax highlighter ini di blog, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Syntax Highlighter di Blog

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Tambahkan kode css ini 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}

4. Kemudian tambahkan kode ini 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 -->

5. Lalu Simpan tema

Cara Menggunakan Syntax Highlighter di Blog

Untuk menerapkannya di blog cukup mudah.

Ketika Anda menulis postingan baru yang memiliki kode script dan ingin kode tersebut terlihat lebih bagus menggunakan syntax highlighter, caranya yaitu:

1. Buka postingan Anda
2. Kemudian masuk ke bagian HTML bukan Compose
3. Tulis <pre><code>Masukkan Kode Script Disini</code></pre>

Contohnya, saya menulis kode script HTML:

<pre><code>lt;b:widget-setting name=&#039;sorting&#039;&gt;NONE&lt;/b:widget-setting&gt;
        &lt;b:widget-setting name=&#039;text-1&#039;&gt;About&lt;/b:widget-setting&gt;
        &lt;b:widget-setting name=&#039;link-1&#039;&gt;http://best-way2themes.blogspot.in/p/about.html&lt;/b:widget-setting&gt;
        &lt;b:widget-setting name=&#039;text-0&#039;&gt;Home&lt;/b:widget-setting&gt;
        &lt;b:widget-setting name=&#039;link-2&#039;&gt;http://best-way2themes.blogspot.in/p/contact-us.html&lt;/b:widget-setting&gt;</code></pre>

Jika Anda ingin menambahkan kode HTML seperti di atas saya menyarankan agar lebih baik di parse dulu kode tersebut menggunakan tool Parse HTML.

Tapi kalau kode css atau javascript Anda tidak perlu melakukan parse terlebih dahulu jika memungkinkan.

Itulah artikel mengenai cara mudah membuat syntax highlighter di blogger, selamat mencoba dan semoga bermanfaat. Jangan lupa share artikel ini