Cara Membuat Syntax Highlighter di Blog
Syntax Highlighter merupakan fitur text editor yang berfungsi untuk menampilkan teks terutama source code. Dengan menggunakan Syntax Highlighter, kalian bisa dengan mudah menulis source code atau bahasa terstruktur seperti Bahasa Markup(Markup Language). Contohnya seperti Javascript, HTML, CSS, dan bahasa program lainnya yang ingin ditampilkan.
Syntax Highlighter biasanya digunakan pada blog tutorial yang sering membagikan source code seperti yang sedang saya lakukan di artikel ini. Untuk membuat Syntax Highlighter pada sebuah blog itu benar-benar mudah sekali.
Jadi pada hari ini kita akan membahas “Cara Memasang Syntax Highlighter di Blog” dan juga tidak memberatkan loading blog kalian karena hanya menggunakan CSS saja.
Mari kita langsung ajah ke tutorialnya.
Memasang Syntax Highlighter
Pertama-tama kita harus Memasang Syntax Highlighternya terlebih dahulu agar bisa digunakan. Sekarang kalian letakkan kode dibawah 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}Silakan ganti warnanya sesuai yang kalian inginkan
Membuat Syntax Highlighter
Sekarang kalian sudah bisa membuat Syntax Highlighternya dan untuk penggunaannya kalian masukkan kode dibawah ke dalam postingan kalian.
<pre><code> <!-- Masukkan semua kode Javascript, HTML atau CSS disini --></pre></code>Untuk penulisan kode HTML dan Javascript pastikan kodenya sudah diparse terlebih dahulu
Penutup
Semoga bermanfaat buat kalian semuanya dan juga semakin berkembang blognya. Mohon maaf jika penggunaan kata-katanya sulit dimengerti. Jika ada hal-hal yang ingin ditanyakan silakan berkomentar saja dibawah.