Cara penulisan Syntax Highlighter di blogger dengan CSS

Syntax highlighter adalah text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya. Umumnya ditemukan pada blog bertema tutorial seperti masandri.org. selain itu dapat merapikan huruf dan membuat pengunjung dapat dengan mudah membedakan mana yang merupakan kode CSS, HTML, atau JavaScript dengan tulisan biasa.

Umumnya syntax highlighter dapat membuat huruf menjadi warna-warni. Tapi dalam tutorial kali ini dibuat satu warna saja karena hanya dibuat menggunakan CSS. Jika blog sobat bertema tutorial dan sering membagikan source code, maka tidak ada ruginya membuat syntax highlighter di blogspotnya hanya dengan CSS seperti dibawah ini.

Cara Memasang Syntax Highlighter di Blogger

Jika sebelumnya sudah ada kode CSS .post-body pre dan .post-body pre code maka hapus dulu agar tidak bentrok. Lalu tambahkan deretan kode berikut "SEBELUM/Di Atas" </style>

.post-body pre {
background-color: #292E34; /* warna background */
border-left: 5px solid #008c5f; /* 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

Cara Menggunakan Syntax Highlighter di Bligger

Untuk menggunakannya syntex highlighter di blog dalam isi postingan tinggal di panggil menggunakan <pre> dan <code> seperti contoh berikut.

<pre><code>
<!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>
jika ingin menulis tag HTML atau JavaSrcript di dalam syntax highlighter maka wajib di parse lebih dulu di Blogcrowds agar tidak menghancurkan tampilan template

Demonya bisa sobat cek di postingan ini sendiri. Ketika saya membagikan potongan kode tutorial, kodenya disimpan di dalam syntax highlighter, bukan? Kalau ingin demo yang lebih jelas bisa dicek di Codepen.

Memasang syntax highlighter di blog pure CSS memang tidak membuat huruf warna-warni seperti text editor aslinya semacam Sublime Text, Atom, Bracket, dll. Jika ingin colorfull begitu harus menggunakan JavaScript lagi. Tapi versi ini jauh lebih ringan karena tidak menggunakan script apa-apa. Makanya saya lebih suka versi ini dari pada yang warna-warni. Sumber artikel : https://www.igniel.com/

No comments:

Powered by Blogger.