Tutorial Cara Memasang Syntaxhighlighter Pada Blog Atau Website
Muh. Ashhar Bustan

Tutorial Cara Memasang Syntaxhighlighter Pada Blog Atau Website

Hari ini hari sabtu, kantor libur dan waktunya main futsal. Sebagai pemain futsal yang hebat dan profesional saya harus menjaga kebugaran dan kesehatan tubuh, jadi sebelum main futsal sebaiknya posting di blog dulu biar tetap sehat dan bugar (apa hubungannya?). Sebelum saya makin ngaco dan makin sehat mending kita mulai aja tutorialnya bapak dan ibu sekalian.

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!

Baca Juga: Cara Membuat File XML Menggunakan PHP


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>

Untuk lebih lengkapnya seperti dibawah:

Baca Juga: Cara Membuat dan Memasang Favicon di Blog atau Website


<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shCore.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shBrushPhp.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shBrushXml.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shBrushJava.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shBrushVb.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>asset/news/js/syntaxhighlighter/shAutoloader.js"></script>

<script type="text/javascript">SyntaxHighlighter.all(); </script>

Tahap selanjutnya yaitu cara menggunakan Syntaxhighlighter:
Ada 2 (dua) metode atau cara yang bisa kita gunakan yaitu menggunakan <pre /> atau <script />

<pre class="brush: java">
function foo()
  {
      if (counter <= 10)
          return;
  }
</pre>

ATAU
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  function foo()
  {
      if (counter <= 10)
          return;
  }
]]></script>

Sebagai catatan jika menggunakan <script /> harus menggunakan tag CDATA

Hasil Rendernya serperti ini:

function foo(){
if (counter &lt;= 10)
    return;
}

Semoga tutorial syntaxhighlighter ini bermanfaat, Aamiin!

Baca Juga: Memecah String Berdasarkan Parameter Tag HTML Dengan DOM Parser PHP


YANG LAIN:

Komentar