Cara Membuat Syntax Highlighter dengan PrismJS Terbaru

penjelasan syntax highlighter dan cara memasangnya di blogger

Bagi kebanyakan Blogger yang menyediakan tutorial tentang HTML, CSS, dan coding sejenis di blog mereka, memasang syntax highlighter adalah sebuah kewajiban. Selain berguna sebagai penjelas serta pembeda dari jenis tulisan lain, fitur keren ini juga akan menambah nilai desain serta tampilan dari blog tersebut.

Awal mula saya memasang syntax highlighter pada blog ini adalah ketika saya mulai posting tentang tutorial blogger. Bagi yang penasaran bagaimana perjalanan saya dalam menggunakan berbagai macam syntax highlighter.

Daftar Syntax Highlighter yang Pernah Digunakan

  1. Syntax Highlighter bawaan template
    Syntax highlighter pertama yang saya gunakan adalah buatan MKR Design pada template Ijonkz 1.3.

    Tampilan berbentuk kotak dengan penomoran dan keterangan jenis kode HTML, CSS, JS, dan JQuery dengan warna senada dengan tulisan kodenya.

    Untuk lebih jelasnya bisa melihat gambar dibawah ini.

  2. Syntax Highlighter oleh Alex Gorbatchev
    Setelah beberapa kali searching tentang syntax highlighter di internet, syntax highlighter pertama yang benar-benar bisa berjalan ketika saya pasang adalah miliknya Alex Gorbatchev ini.

    Saya sudah pernah share juga cara memasangnya di blog ini, berikut link ke artikel Cara Membuat Syntax Highlighter Di Blogger - TaufiqHdyt.com.

    Untuk tampilannya bisa dilihat pada gambar berikut.

  3. Code Prettify
    Selanjutnya adalah Code Prettify. Project ini dikembangkan oleh google dan dapat digunakan di berbagai platform.

    Yang satu ini sudah saya buatkan juga tutorialnya di Cara Membuat Syntax Highlighter dengan Code Prettify - TaufiqHdyt.com.

    Berikut tampilannya.

  4. PrismJS
    Dan sejak saya membuat tutorial tentang Code Prettify diatas, sampai saat ini saya menggunakan PrismJS di blog ini.

    Selain mudah digunakan, fitur fast loading serta desain yang memanjakan mata, Syntax Highlighter ini juga mudah untuk dicustomisasi.

    Untuk tutorial cara memasang dan menggunakannya akan saya jelaskan dibawah.

    Berikut tampilannya di blog ini.

  5. Nah, diatas adalah beberapa Syntax Highlighter yang pernah saya gunakan di blog ini.

Cara Memasang PrismJS di Blogger

  1. Sebaiknya backup dulu template sobat untuk menanggulangi hal-hal yang tidak diinginkan,
  2. Copy paste code berikut diatas </body>, pada edit Template HTML.
    <b:if cond='data:blog.pageType == "item"'>
 <link href='https://cedeen.netlify.app/prism/prism16.css' rel='stylesheet'/>
 <script async='async' defer='defer' src='https://cedeen.netlify.app/prism/prism16.js' type='text/javascript'/>
</b:if>
  3. Lalu di SAVE.

Cara Menggunakan PrismJS di Blogger

  1. Saat akan menggunakan PrismJs pada Post di Blogger, gunakan mode HTML, bukan Compose.
  2. Siapkan kode yang akan di Highlight, misal kode;
    echo "Aku Suka PHP";
  3. Copy paste kode diatas kemudian parse kode menggunakan tool Quick Escape HTML,
    Jangan lupa untuk mencentang pilihan paling bawah.
  4. Atau jika ingin menulis manual bisa menggunakan template ini,
    <pre class="language-php"><code>
 echo "Aku Suka PHP";
</code></pre>
    Syntax umum untuk bahasa pemrograman yang lain: 
    <pre class="language-markup"><code>
 <p>Aku Suka HTML<p>
</code></pre>
    <pre class="language-css"><code>
 /* Aku Suka CSS */
</code></pre>
  5. Dan nanti, hasilnya akan seperti ini. 
     echo "Aku Suka PHP";
    
 
    Aku Suka HTML
    

    
 /* Aku Suka CSS */

Jika Anda ingin mengupload dan menghosting sendiri file CSS serta JS yang ada pada code diatas, sobat bisa mendownloadnya di bawah ini. Atau, jika ingin menggunakan kode yang saya gunakan diatas juga tidak apa-apa. Atau jika ingin meracik sendiri bahasa pemrograman yang diinginkan, bisa mengunjungi laman https://prismjs.com/download.html, lalu download file CSS dan JS yang telah di generate secara otomatis di bagian bawah laman tersebut.

Demikian tutorial tentang cara memasang dan membuat Syntax Highlighter menggunakan PrismJS pada blogger, semoga bermanfaat.

Download Links

7 komentar

  1. bang saya pake template linnkmagz tapi kok gak berhasil ya?
  2. eh udah berhasil deh bang terimakasih tutorialnya oh ya saya mau tanya balko blogspot bagusan cdn atau enggak ya kalau buat kecepatan loading?
    1. Siap bang, makasih juga sudah mampir.

      Kalau pake CDN bagusnya kalau script external nya sedikit, jadi kalau ada banyak lebih baik disatukan agar jumlah "Request" nya ter-minimalisir.

      Alternatif CDN bisa pakai dari Statically.io.

      Bisa juga di hosting langsung di Blogger dengan cara kode atau script tersebut di masukkan langsung dalam tema-nya (inline css, internal css, internal js), hanya saja nanti ukuran lamannya meningkat.

      Jadi tinggal diatur sesuai kebutuhan.
  3. mas itu di pre-class=langage-php bisa saya rubah jadi language-html atau bahasa pemrograman lainnya gak ya bang?
    1. Bisa, bang.

      kalau mau html tinggal dikasih "language-markup",
      kalau mau css tinggal dikasih "language-css",
      kalau mau js tinggal dikasih "language-js".

      Bisa juga kustomisasi sendiri bahasa pemrograman yang diinginkan dengan membuat sendiri PrismJS-nya dari prismjs.com/download.html
  4. kalau dibuka di komputer aman... tapi pas dibuka di hape gak bisa digulir kenapa ya bank
    1. Boleh saya bantu cek bang?

      Bisa jadi ada beberapa kode CSS pembungkus tag <pre> <code> ... </code> </pre> yang konflik bang, misal nya CSS overflow yang konflik dengan bawaan template.