√ Cara Membuat Syntax Highlighter di Blog

Cara Membuat Syntax Highlighter di Blog

Monday, January 24, 2022

Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Berikut penjelasan tentang Syntax Highlighter.

Syntax Highlighter adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Selain mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenal jenis kode yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

1. Pertama masuk ke Dashboard Blogger > Tema > Edit HTML dan letakkan script di bawah ini sebelum tag </head>.

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>

<script>hljs.highlightAll();</script>

2. Selanjutnya, tambahkan deretan kode CSS berikut ini tepat dibawah sebelum tag </style>.

pre code.hljs{display:block;overflow-x:auto;padding:1em}

code.hljs{padding:3px 5px}

.hljs{color:#c9d1d9;background:#0d1117}

.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}

.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}

.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}

.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}

.hljs-built_in,.hljs-symbol{color:#ffa657}

.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}

.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}

.hljs-subst{color:#c9d1d9}

.hljs-section{color:#1f6feb;font-weight:700}

.hljs-bullet{color:#f2cc60}

.hljs-emphasis{color:#c9d1d9;font-style:italic}

.hljs-strong{color:#c9d1d9;font-weight:700}

.hljs-addition{color:#aff5b4;background-color:#033a16}

.hljs-deletion{color:#ffdcd7;background-color:#67060c}

3. Jika step 1 & 2 sudah selesai kemudian simpan template.

4. Cara Menggunakan Syntax Highlighter di Blogger

Untuk menggunakannya syntax highlighter di blog dalam isi postingan tinggal dipanggil 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 Javascript di dalam syntax highlighter maka wajib diparse lebih dulu, agar tidak menghancurkan tampilan template, untuk parse bisa disini.

Demonya bisa dicek di postingan ini sendiri.