Cara Membuat Syntax Highlighter di Blog Template Linkmagz

Syntax Highlighter di Blog - Pernahkan anda melihat postingan yang didalamnya ada script ? Postingan yang ada Syntax Highlighter akan memampilkan kode script ini dengan rapi. Kita akan dapat dengan mudah membedakan mana tulisan artikel, mana kode dari script. 

Contoh gambar diatas diambil dari blog dengan platform blogspot. Terlihat disana, kode memiliki warna tulisan putih, sementara background berwarna hitam. Terlihat menarik, dan dapat dengan mudah kita identifikasi kode dengan teks.

Fitur Syntax Highlighter merupakan text editor yang berfungsi untuk menampilkan teks biasanya source code. Dengan adanya Syntax Highlighter pada template, pembaca dapat dengan mudah menulis source code atau bahasa terstruktur seperti Bahasa Markup (Markup Language). Contohnya ketika anda ingin menulis source code seperti Javascript, HTML, CSS, dan bahasa program lainnya yang ingin ditampilkan didalam sebuah artikel.

Cara Membuat Syntax Highlighter di Blog Template Linkmagz

Pada kesempatan kali ini saya akan berbagi ilmu cara membuat syntax highlighter di blog Template Linkmagz. Dimana template linkmagz ini, belum dilengkapi dengan fitur syntax highlighter seperti template lainnya. Ada dua prosedur yang kita kerjakan disini.

1. Menambahkan kode syntax highlighter ditemplate linkmagz

2. Menulis syntax highlighter di artikel postingan

1. Menambahkan kode syntax highlighter ditemplate linkmagz

Sebelum kita dapat menulis source code di artikel terlebih dahulu kita tambahkan fitur ini pada template linkmagz. Cara penambahan kode syntax highlighter ditemplate linkmagz pun terbilang cukup mudah. Pertama-tama kita harus Memasang Syntax Highlighternya terlebih dahulu agar kode berikutnya dapat berfungsi atau digunakan. Sekarang kalian letakkan kode dibawah ini tepat sebelum kode </style>.

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #de0985; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Sampai pada langkah ini, kita sudah berhasil menambahkan fitur syntax highlighter ditemplate linkmagz. Jika kode yang ada copy paste diatas tadi lengkap, fitur ini akan bekerja dengan baik saat kita menulis artikel disertai sorce code. Langkah selanjutnya adalah cara menulis artikel yang mengandung sourc code menggunakan syntax highlighter.

2. Menulis syntax highlighter di artikel postingan

Untuk dapat menggunakan syntax highlighter di artikel postingan anda harus menambahkan kode berikut di postingan artikel, dengan HTML view, ingat mode ini. Jangan gunakan Compose view. Pada HTML view silahkan copy dan pastekan kode berikut.

 <pre><code>
  <!-- Masukkan semua kode Javascript, HTML atau CSS disini -->
</pre></code>

Catatan :

Saat penulisan kode HTML dan Javascript pastikan kodenya sudah diparse terlebih dahulu, gunakan tool online jika tidak punya offline.

Anda akan sering bolak balik berpindah mode HTML view ke Compose view atau sebaliknya. Pada saat membuat artikel yang terdapat sorcecode akan menjadi tantangan tersendiri bagi anda penulis blog. Kesabaran dan ketelitian merupakan kunci dari seorang blogger berhasil.

Jika ada bagian yang membingungkan dan tidak bekerja, silahkan japri saya melalui kolom komentar. Saya akan dengan senang dapat melayani pembaca blog kami ini.