Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Suka dengan konten Maringngerrang.com?
Jika kamu merasa terbantu dengan konten di blog ini, silakan dukung kami melalui Saweria.co/maringngerrang. Dukungan berharga dari kalian semua-lah yang membuat blog ini bisa tetap hadir di hadapan kamu. Terima kasih!

Mewarnai Kode (Syntax Highlighter) yang Ditulis di Posting Blogger

Mewarnai Kode (Syntax Highlighter) yang Ditulis di Posting Blogger

Blogger dan Blog Engine

Mewarnai Sintaks (Syntax Highlighter) yang Ditulis di Posting Blogger ― Sebuah blog merupakan halaman situs di internet yang mempunyai berbagai artikel yang tersusun berdasarkan waktu dengan pembahasan yang tertentu dan terkhusus pada setiap artikelnya. Saat ini perkembangan dunia blogging di internet sudah semakin luas dan semakin pesat. Semakin hari semakin banyak orang-orang yang membuat blog bahkan mengunjungi blog yang ada di internet.

Tidak terkecuali mengunjungi blog untuk tujuan referensi dan pembelajaran. Berbeda dengan masa awal diciptakannya blog yang kebanyakan bertujuan untuk membuat artikel bersifat lebih personal atau membahas tentang kisah seseorang atau suatu komunitas. Saat ini blog sudah banyak dimanfaatkan sebagai tempat berbagi tentang bermacam-macam informasi seperti, tutorial, review, daftar rekomendasi, bahkan artikel aktivitas-aktivitas tertentu bisa ditemukan.

Karena hal itu pula saat ini sudah banyak bermunculan pihak-pihak yang membuat dan memasarkan template blog. Pada dasarnya blog dapat dibuat secara manual maupun dibuat menggunakan sebuah aplikasi berbasis web yang biasa disebut blog engine, meskipun blog engine juga sebenarnya bisa dibuat sendiri secara manual.

Blog engine merupakan aplikasi berbasis web yang bertugas untuk memanajemen/mengatur serta membuat dan menyusun berbagai komponen pada sebuah blog. Blog engine yang paling populer digunakan hingga saat ini ada dua, yaitu Wordpress dan Blogger. Kedua blog engine tersebut mempunyai perbedaan yang cukup signifikan dari segi bahasa yang digunakan. Maksud bahasa di sini adalah bahasa pemrograman yang digunakan.

Wordpress merupakan aplikasi web yang bersifat open source dengan bahasa yang digunakan adalah Hypertext Preprocessor atau yang lebih dikenal dengan PHP. Sebagian besar pengguna blog yang lebih serius menggunakan Wordpress sebagai blog engine mereka, selain karena mempunyai fitur yang lebih lengkap juga karena sifatnya yang open source jadi faktor wordpress banyak digunakan.

Selain Wordpress salah satu blog engine yang paling populer adalah Blogger, salah satu aplikasi web yang berada di bawah kepemilikan Google. Blogger juga menjadi pilihan banyak orang dikarenakan sifatnya yang bisa digunakan meski tanpa mengeluarkan biaya sama sekali serta sangat mudah digunakan.

Syntax Highlighter di Blogger

Salah satu pembahasan yang cukup banyak dimuat dalam berbagai blog di internet adalah pembahasan tentang blog itu sendiri. Maksudnya apa? Jadi sederhananya banyak orang yang membahas tentang pembuatan blog di blog. Selain tentang cara membuatnya, banyak pula blog yang membahas tentang cara mengatur, memodifikasi, menambahkan, dan memperbaiki hal-hal yang lebih teknis seputar blog.

Salah satunya adalah Maringngerrang.com, dalam blog ini banyak dibahas tentang tips dan trik seputar blog serta cara-cara mengatasi berbagai masalah yang dapat terjadi pada sebuah blog di Blogger.

Salah satu hal yang paling banyak muncul dalam pembahasan tentang Blogger adalah sintaks (syntax), yaitu kode yang digunakan dalam bahasa pemrograman. Hal seperti ini cukup banyak dimasukkan kedalam posting blog sebagai kode sumber source code yang pada dasarnya cukup penting dan sangat diperlukan pembaca.

Untuk memudahkan pembaca atau pengunjung blog dalam melihat dan memahami isi dari sebuah source code atau sintaks, digunakan sebuah metode yang cukup berguna, yaitu mewarnai kode tersebut berdasarkan bagian-bagiannya. Bagian dalam sebuah sintaks yang mempunyai nama/jenis dan kegunaan yang berbeda akan diberi warna yang berbeda, sehingga orang yang melihatnya bisa memahami dengan lebih mudah apa maksud dari kode tersebut.

Mewarnai Kode (Syntax Highlighter) yang Ditulis di Posting Blogger

Memasang Syntax Highlighter di Blogger

Di Blogger (dan blog engine pada umumnya) sebenarnya tidak ada fitur atau pengaturan khusus untuk mengaktifkan fitur Syntax Highlighter, tetapi fitur tersebut bisa dibuat dan ditambahkan sendiri di Blogger. Secara fungsi Syntax Highlighter sangat berguna dalam membantu pembaca melihat sebuah kode, selain itu fitur ini juga membuat tampilan pada blog jadi lebih menarik dan lebih warna-warni elegan. Sebagai contoh kamu bisa melihatnya di halaman demo. Syntax Highlighter bisa dipasang di Blogger dengan mengikuti langkah-langkah berikut ini.
  1. Buka Blogger
  2. Buka menu Tema kemudian klik simbol titik tiga untuk membuka pilihan tambahan lalu pilih Edit HTML
  3. Mewarnai Kode (Syntax Highlighter) yang Ditulis di Posting Blogger
  4. Temukan kode </body> dan letakkan kode berikut di atasnya
  5. <script src="https://code.maringngerrang.com/highlight.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
  6. Setelah itu temukan kode </head> dan letakkan kode berikut di atasnya
  7. <link href="https://code.maringngerrang.com/highlight/default.css" rel="stylesheet" />
  8. Selanjutnya klik tombol ikon Simpan


Mengubah Style Syntax Highlighter

Pada halaman demo kamu telah melihat berbagai jenis style untuk syntax highlighter yang bisa dipilih. Untuk mengubah/memilih style yang akan digunakan pada blog kamu, cukup pilih style yang kamu inginkan dan copy kode yang muncul pada bagian source code, kemudian ganti kode yang kamu tambahkan pada langkah ke-4 di atas.

Menggunakan Syntax Highlighter di Blogger

Dengan menggunakan cara di atas, kode yang kamu pasang tersebut akan menemukan dan mewarnai sendiri kode yang kamu tulis dalam tag <pre><code>. Kode yang ditulis juga akan dideteksi secara otomatis bahwa kode tersebut menggunakan bahasa apa, serta dapat mengenali 189 jenis bahasa.

Tetapi apabila sintaks yang ditulis dalam tag <pre><code> tidak dapat dikenali secara otomatis, kamu bisa secara spesifik menuliskan bahasanya dengan menggunakan class attribute:

<pre><code class="html">...</code></pre>

Kamu tinggal mengganti nama class di atas sesuai bahasa dari sintaks yang kamu tuliskan. Class tersebut juga dapat ditulis dalam bentuk language- atau lang- dan diikuti dengan nama bahasanya.

<pre><code class="language-html">...</code></pre>

Sedangkan jika kamu ingin menuliskan sebuah teks atau sintaks dalam tag <pre><code> tanpa harus diwarnai, kamu bisa menambahkan kelas dengan nama plaintext. Teks yang ditulis dalam class tersebut akan tetap memiliki background menyerupai sintaks yang lain.

<pre><code class="plaintext">...</code></pre>

Tetapi jika kamu mau semua style dihilangkan (tidak diwarnai dan tidak diberi background), kamu bisa menambahkan kelas dengan nama nohighlight, sehingga tag yang digunakan menjadi seperti berikut.

<pre><code class="nohighlight">...</code></pre>

Sintaks yang Ditulis Harus Dikonversi

Selain itu ada satu hal yang juga cukup penting dan harus kamu ingat, bahwa sintaks atau kode yang ditulis dalam tag pre harus dikonversi terlebih dahulu menjadi karakter entitas misalnya seperti simbol < harus ditulis sebagai &lt;. Untuk memudahkan konversi, kamu bisa menggunakan tool dari blog ini bernama Script Converter.

Penutup

Itulah langkah-langkah tentang bagaimana cara mengatur agar sintaks yang ditulis dalam postingan di Blogger bisa diwarnai layaknya sintaks yang ditulis dalam code editor. Sintaks akan otomatis diwarnai apabila ditulis dalam tag pre dan harus dikonversi dulu menjadi karakter entitas menggunakan script converter.

Semoga tutorial yang disampaikan dalam artikel ini bisa bermanfaat untuk kamu dan bisa memberikan wawasan baru yang bermanfaat. Apabila terdapat hal-hal yang kurang jelas dalam tulisan ini dan perlu ditanyakan, silakan sampaikan pertanyaan kamu pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Posting Komentar untuk "Mewarnai Kode (Syntax Highlighter) yang Ditulis di Posting Blogger"

Dapatkan Info Terbaru!