Cara Membuat Syntax Highlighter di Blogger
Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya. Tanpa panjang lebar berikut untuk cara pemasang Syntax Highlighter.
Cara Membuat Syntax Highlighter di Blogger
1. Login Blogger > Tema > klik Edit HTML2. Lalu tambahkan kode CSS dibawah ini diatas kode ]]>]]></b:skin> atau diatas kode ]]></style>
/* CSS Syntax Highlighting */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#333;color:white}
.hljs-name,.hljs-strong{font-weight:bold}
.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}
3. Lanjut, Tambahkan kode dibawah ini tepat diatas </head>
<script src='https://cdn.rawgit.com/TipsRyand/Newbie/1175a2a4/highlight2.js' type='text/javascript'/>
4. Simpan Template.
Cara Menggunakan Syntax Highlighter di Blogger
1. Untuk menggunakan Syntax Highlighter dipostingan tambahkan kode <pre><code></code></pre> dan diisi dengan kode (HTML, CSS, JavaScript, jQuery) yang ingin ditambahkan.Contoh
<pre><code>
---ISI KODE DI SINI--
</code></pre>
Jangan lupa untuk melakukan Parse HTML terlebih dahulu sebelum menggunakan Sytax Highlighter, Anda dapat memparse disini
Demikian tutorial Cara Membuat Syntax Highlighter di Blogger semoga bisa diterapkan di blog Anda, jika ada pertanyaan silahkan tinggalkan pertanyaan Anda di kolom komentar. TerimaKasih.