Cara Membuat Syntax Highlighter di Blogger

Cara Membuat Syntax Highlighter di Blogger

Cara Membuat Syntax Highlighter di Blogger - Selamat malam, kali ini saya akan membuat artikel tentang Syntax Highlighter tentunya tidak akan lepas dari kode rumit yang terdapat dalam sebuah Blog atau editor source code bahasa pemrograman. Apa sebenarnya yang dimaksud dengan Syntax highlighter dan apa fungsinya? saya akan mencoba menerjemahkan arti Syntax highlighter dalam pengertian saya. Syntax highlighter menurut saya adalah fitur khusus untuk proses pemindahan sebuah code bahasa pemrograman tertentu dimana tulisan, warna teks, posisi sama persis dengan yang terdapat di sebuah code bahasa pemrograman untuk di pindahkan atau di copy ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajari.

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 HTML
2. 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.
Load comments