# Navigation

Tutorial Cara Memasang Syntaxhighlighter Pada Blog Atau Website

Tutorial Cara Memasang Syntaxhighlighter Pada Blog Atau Website

Singkat cerita, saya sedang mengembangkan blog yang membahas tentang tutorial pemrograman komputer, jadi otomatis postingan di blog saya isinya berupa listing program. Biar kelihatan menarik dan tidak membingungkan pengunjung, maka harus dibedakan mana yang tulisan biasa dan manay yang merupakan listing program. Ceritanya selesai, Alhamdulillah!

Di sini saya menggunakan plugins. Syntaxhighlighter adalah plugin yang disediakan gratis atau free yang fungsinya untuk memberikan pewarnaan terhadap perintah-perintah bahasa pemrograman atau tag-tag html, sehingga listing program yang ada pada halaman website atau blog terlihat seperti ketika kita menulis program pada aplikasi IDE atau text editor seperti Notepad++, Sublime dan sejenisnya.

Syntaxhighlighter yang bisa teman-teman download di sini (download versi yang paling baru). Setelah download silahkan diekstrak, contoh hasilnya seperti gambar di bawah.

Folder Syntaxhighlighter

Di dalamnya ada beberapa folder, tapi tidak semuanya digunakan. Kita hanya akan menggunakan file yang ada di dalam folder scripts dan styles. Folder scripts berisi banyak file css yang merupakan theme syntaxhighlighter dan bisa kita pilih salah satunya, untuk lebih mudahnya kita gunakan yang default.

Selanjutnya adalah folder scripts, folder ini berisi file javascript yang berfungsi untuk mengenali listing program atau perintah-perintah pada listing program (rendering), ada banyak jenis bahasa pemrograman yang didukung diantarnya Java, HTML, CSS, Javascript dan lain-lain, teman-teman bisa lihat sendiri di dalam folder script. Gunakan file yang sesuai dengan kebutuhan teman-teman jangan dipanggil semua kan sayang kalau ga ke pake itu namanya mubazzir dan dilarang oleh agama.

Cara pemasangan syntaxhighlighter pada website atau blog sangat mudah, lebih mudah dari ngupil, ga percaya? Mari kita buktikan, ikuti langkah-langkah di bawah:

Tahap awal yaitu cara pemasangan syntaxhighlighter:

  1. Tambahkan file “shCore.js” dan “shCore.css” pada halaman website atau blog agan.
  2. Tambahkan file “brushes” (file javascript yang menangani perintah-perintah listing program) yang agan butuhkan, misalnya shBrushJava.js untuk JAVA.
  3. Selanjutnya untuk theme tambahkan file “shCore.css” dan “shThemeDefault.css”
  4. Dan yang terakhir panggil fungsi javacript “SyntaxHighlieghter.all()”.
  5. Letakkan semua file sebelum tag </head>

YANG LAIN: