Beranda / Semua Postingan / Tips Blogger

Tutorial Pasang Script Penyorot Kode (Prism.js) di Blogspot Anti Error

Posting Komentar
Cara memasang syntax highlighter untuk kode HTML CSS dan JavaScript di Blogger

Jika Anda sering membuat artikel tutorial Blogger, HTML, CSS, atau JavaScript, menampilkan kode menggunakan teks biasa dapat membuat artikel terlihat kurang rapi dan sulit dibaca. Barisan kode yang panjang juga mudah bercampur dengan teks penjelasan sehingga pembaca kesulitan membedakan antara kode dan konten artikel.

Salah satu solusinya adalah menggunakan syntax highlighter di Blogger. Fitur ini memberikan warna dan format berbeda pada bagian-bagian kode sehingga struktur HTML, CSS, JavaScript, dan bahasa pemrograman lainnya lebih mudah dipahami.

Pada tutorial ini, Anda akan mempelajari cara memasang syntax highlighter di Blogger menggunakan Prism.js. Selain cara memasangnya di template, artikel ini juga membahas cara menampilkan kode HTML, CSS, dan JavaScript di dalam postingan Blogger.

Apa Itu Syntax Highlighter?

Syntax highlighter adalah fitur yang digunakan untuk memberikan warna dan format visual pada kode program sesuai dengan struktur bahasa yang digunakan. Misalnya, tag HTML, properti CSS, fungsi JavaScript, komentar, dan nilai atribut dapat ditampilkan dengan warna yang berbeda.

Dengan tampilan seperti ini, pembaca dapat mengenali struktur kode dengan lebih cepat dibandingkan ketika seluruh kode ditampilkan menggunakan teks biasa.

Manfaat Syntax Highlighter untuk Blog Tutorial

Bagi pemilik blog yang sering membagikan tutorial pemrograman atau modifikasi Blogger, syntax highlighter dapat membantu meningkatkan keterbacaan konten. Beberapa manfaatnya antara lain:

  • Membuat kode lebih mudah dibaca.
  • Membedakan kode dengan teks artikel.
  • Mempertahankan struktur dan indentasi kode.
  • Membantu pembaca memahami sintaks program.
  • Membuat artikel tutorial terlihat lebih terstruktur.

Syntax highlighter bukan faktor yang secara langsung menjamin peningkatan ranking Google. Fungsi utamanya adalah meningkatkan penyajian kode dan kenyamanan pembaca.

Bagaimana Syntax Highlighter Bekerja?

Secara umum, syntax highlighter akan membaca kode yang berada di dalam elemen <pre> dan <code>. Class tertentu kemudian digunakan untuk menentukan bahasa pemrograman yang sedang ditampilkan.

Sebagai contoh, kode HTML dapat menggunakan class language-html, sedangkan CSS menggunakan language-css dan JavaScript menggunakan language-javascript.

Pada tutorial ini kita menggunakan Prism.js, sebuah library syntax highlighting yang dapat digunakan untuk memberikan pewarnaan sintaks pada berbagai bahasa pemrograman.

Kode Syntax Highlighter Blogger

Berikut kode yang perlu ditambahkan ke template Blogger. CSS Prism digunakan untuk tampilan visual, sedangkan JavaScript Prism digunakan untuk memproses kode berdasarkan bahasa yang ditentukan. 

<!-- Prism.js CSS -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>

<!-- Prism.js Core -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'></script>

<!-- Bahasa Markup / HTML -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js'></script>

<!-- Bahasa CSS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js'></script>

<!-- Bahasa JavaScript -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js'></script>

Cara Memasang Syntax Highlighter di Blogger

1. Backup Template Blogger

Sebelum mengedit HTML template, sebaiknya lakukan backup terlebih dahulu. Langkah ini berguna agar template dapat dikembalikan jika terjadi kesalahan saat melakukan perubahan kode.

2. Buka Menu Tema

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda modifikasi. Kemudian buka menu Tema.

3. Buka Edit HTML

Pada halaman Tema, buka opsi Edit HTML untuk mengakses kode sumber template Blogger.

4. Cari Tag </head>

Klik area editor HTML, kemudian gunakan fitur pencarian dengan menekan Ctrl + F. Cari tag berikut: 

</head>

Tempelkan baris CSS Prism tepat sebelum tag tersebut: 

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>

5. Cari Tag </body>

Selanjutnya cari tag penutup body: 

</body>

Letakkan script Prism.js tepat sebelum tag tersebut. 

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js'></script>

6. Simpan Template

Setelah memastikan seluruh kode sudah ditempatkan dengan benar, simpan perubahan template. Jika Blogger menampilkan pesan error, jangan lanjutkan penyimpanan sebelum memeriksa kembali struktur kode yang ditempelkan.

Cara Menggunakan Syntax Highlighter di Artikel Blogger

Setelah Prism.js berhasil dipasang pada template, Anda dapat menggunakannya di postingan dengan kombinasi elemen <pre> dan <code>.

Untuk kode HTML, gunakan class language-html. Contohnya: 

<pre>
  <code class="language-html">
    KODE HTML ANDA
  </code>
</pre>

Contoh Syntax Highlighter untuk HTML

Jika Anda ingin menampilkan kode HTML kepada pembaca, gunakan struktur berikut: 

<div class="kotak">
  <h2>Judul Artikel</h2>
  <p>Ini adalah contoh teks.</p>
</div>

Contoh Syntax Highlighter untuk CSS

Untuk kode CSS, gunakan class language-css: 

.kotak {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  color: #333333;
}

Contoh Syntax Highlighter untuk JavaScript

Untuk JavaScript, gunakan class language-javascript: 

document.addEventListener("DOMContentLoaded", function() {
  console.log("Script berhasil dijalankan.");
});

Cara Menulis Kode HTML agar Tidak Merusak Artikel

Ada satu hal penting yang perlu diperhatikan ketika menampilkan kode HTML di dalam postingan Blogger. Karakter tertentu seperti tanda < dan > perlu ditulis sebagai HTML entity agar browser menganggapnya sebagai teks kode, bukan sebagai elemen HTML yang harus dirender.

Sebagai contoh, kode: 

<div>Contoh Teks</div>

ditampilkan menggunakan entity &lt; dan &gt; pada bagian sumber postingan.

Hal ini sangat penting terutama ketika Anda membagikan tutorial HTML, karena kode yang tidak di-escape dapat diproses oleh browser sebagai elemen halaman dan bukan sebagai contoh kode.

Cara Menguji Syntax Highlighter

Setelah kode Prism.js dipasang, buat postingan percobaan kemudian masukkan contoh kode HTML, CSS, atau JavaScript menggunakan struktur <pre><code>.

Publikasikan atau pratinjau artikel tersebut, kemudian cari bagian kode yang Anda masukkan. Jika Prism.js berhasil bekerja, kode akan tampil menggunakan tema visual Prism dan bagian-bagian sintaks akan mendapatkan pewarnaan sesuai bahasa yang digunakan.

Uji setidaknya tiga jenis kode jika Anda memang mengaktifkan HTML, CSS, dan JavaScript. Dengan begitu, Anda dapat memastikan setiap komponen bahasa yang dipasang bekerja dengan baik.

Kesalahan Umum Saat Memasang Syntax Highlighter

Prism.js Dipasang Lebih dari Satu Kali

Beberapa template Blogger mungkin sudah memiliki Prism.js atau library syntax highlighting lainnya. Jika Anda memasang library yang sama lebih dari satu kali, konflik atau pemrosesan kode yang tidak diperlukan dapat terjadi.

Sebelum menambahkan kode baru, periksa terlebih dahulu apakah template Anda sudah menggunakan Prism.js.

Salah Menentukan Class Bahasa

Pastikan class sesuai dengan jenis kode yang ditampilkan. Gunakan language-html untuk HTML, language-css untuk CSS, dan language-javascript untuk JavaScript.

Jika class tidak sesuai, Prism.js dapat memberikan pewarnaan yang tidak sesuai atau tidak memproses kode seperti yang diharapkan.

Kode HTML Tidak Di-escape

Kode HTML yang ditempel langsung ke editor tanpa proses escape dapat dianggap sebagai elemen HTML oleh browser. Akibatnya, contoh kode mungkin tidak tampil sebagai teks atau bahkan dapat memengaruhi struktur artikel.

Template Menggunakan Struktur CSS yang Berbeda

Setiap template Blogger dapat memiliki aturan CSS yang berbeda. Jika tampilan kotak kode tidak sesuai dengan harapan, periksa apakah terdapat CSS template yang memengaruhi elemen pre atau code.

Tips Membuat Artikel Tutorial Kode Lebih Nyaman Dibaca

  • Gunakan heading yang jelas untuk setiap bagian tutorial.
  • Jelaskan fungsi kode sebelum menampilkan blok kode.
  • Gunakan syntax highlighting sesuai bahasa pemrograman.
  • Hindari blok kode yang terlalu panjang tanpa penjelasan.
  • Gunakan contoh kode yang relevan dengan pembahasan.
  • Uji kode sebelum dipublikasikan.
  • Pastikan tampilan blok kode tetap nyaman pada perangkat mobile.

FAQ Syntax Highlighter Blogger

Apakah syntax highlighter bisa digunakan di Blogger?

Ya. Syntax highlighter dapat digunakan di Blogger dengan menambahkan library seperti Prism.js ke dalam template dan menggunakan struktur <pre><code> pada artikel.

Apakah Prism.js membutuhkan jQuery?

Tidak. Prism.js dapat digunakan tanpa jQuery sehingga Anda tidak perlu menambahkan library jQuery hanya untuk menjalankan syntax highlighting.

Apakah syntax highlighter memengaruhi SEO?

Syntax highlighter bukan faktor ranking langsung. Fungsinya lebih berkaitan dengan penyajian kode dan keterbacaan artikel. Konten tutorial yang lebih terstruktur dapat membantu pembaca memahami materi dengan lebih mudah.

Apakah syntax highlighter bisa digunakan untuk HTML, CSS, dan JavaScript?

Bisa. Pada kode tutorial ini, Prism.js dipasang bersama komponen untuk Markup/HTML, CSS, dan JavaScript.

Kesimpulan

Memasang syntax highlighter di Blogger merupakan cara praktis untuk membuat kode HTML, CSS, dan JavaScript tampil lebih rapi dan mudah dipahami. Dengan bantuan Prism.js, bagian-bagian sintaks dapat diberi warna sehingga pembaca lebih mudah mengenali struktur kode.

Proses pemasangannya cukup sederhana. Anda hanya perlu menambahkan CSS Prism di bagian <head>, memasang JavaScript Prism sebelum </body>, kemudian menggunakan class bahasa yang sesuai ketika menampilkan kode di dalam artikel.

Sebelum melakukan perubahan pada template, jangan lupa membuat backup dan memeriksa apakah template Anda sudah menggunakan library syntax highlighting lain. Setelah pemasangan selesai, lakukan pengujian pada HTML, CSS, dan JavaScript agar hasilnya sesuai dengan kebutuhan blog Anda.

Posting Komentar untuk "Tutorial Pasang Script Penyorot Kode (Prism.js) di Blogspot Anti Error"

Posting Komentar