Cara Membuat Syntax Highlighter di Blogger

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.

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

Berbagai kode yang Anda bagikan di postingan blog akan berubah warna-warni sehingga lebih terlihat keren dan rapi.

Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni 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

DEMO

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

Catatan:
Anda bisa mengganti warna atau style dari syntax highlighter disini: https://github.com/isagalaev/highlight.js/tree/master/src/styles

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;!-- footer nav menu --&gt;
&lt;div id='footer-navmenu'&gt;
&lt;nav id='footer-navmenu-container'&gt;
&lt;!-- menu navigasi footer start ficri --&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='/p/about.html' title='About'&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/p/contact.html' title='Contact'&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/p/disclaimer.html' title='Disclaimer'&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='/p/privacy-policy.html' title='Privacy Policy'&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- menu navigasi footer end --&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;!-- footer nav menu end --&gt;</code></pre>

Jika Anda ingin menambahkan kode HTML seperti di atas lebih baik 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 membuat syntax highlighter di blogger, selamat mencoba dan semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini