Pages

Monday, October 01, 2012

Bagaimana Cara Memasang Syntax Highlighter pada Blogger

syntax highlighter image
Syntax Highlighter sangat berguna untuk membuat syntax program menjadi lebih mudah dibaca, sehingga syntax program tersebut akan lebih mudah untuk dipahami. Banyak syntax highlighters tersedia secara gratis di internet, salah satunya adalah syntax highlighter dari alexgorbatchev yang saat ini banyak digunakan dan telah mendukung banyak bahasa pemrograman yang berbeda. Disini saya menggunakan syntax highlighter versi 2.1.382 dari alexgorbatchev, dibawah ini adalah langkah-langkah cara memasang syntax highlighter pada blogger:

Bagaimana Cara Memasang Syntax Highlighter pada Blogger?

1. login ke blogger dashboard
2. klik template > edit HTML
3. klik pada "Expand Widget Templates"
4. cari tag </head> (gunakan CTRL+F untuk mempercepat pencarian)
5. copy syntax berikut
       
       


6. paste sebelum tag </head>
7. simpan template.


Cara Penggunaan Syntax Highlighter:


Terdapat dua tag yang dapat digunakan untuk mengaktifkan syntax highlighter, tag <pre> dan tag <script>. anda dapat menggunakan tag-tag tersebut pada mode "HTML".

Menggunakan tag <pre>:
<pre class="brush: java"> masukan syntax java disini </pre>, contoh:

<pre class="brush: java">
  public static void keterangan(char x){
if (x == 'A')
System.out.println("Selamat, Anda lulus dengan nilai: "+x);
else if (x == 'B')
System.out.println("Selamat, Anda lulus dengan nilai: "+x);
else if (x == 'C')
System.out.println("Selamat, Anda lulus dengan nilai: "+x);
else if (x == 'D')
System.out.println("Maaf anda harus mengulang, nilai anda: "+x);
}
</pre>

output:

public static void keterangan(char x){
  if (x == 'A') 
  System.out.println("Selamat, Anda lulus dengan nilai: "+x);
  else if (x == 'B') 
  System.out.println("Selamat, Anda lulus dengan nilai: "+x);
  else if (x == 'C')
  System.out.println("Selamat, Anda lulus dengan nilai: "+x);
  else if (x == 'D')
  System.out.println("Maaf anda harus mengulang, nilai anda: "+x);
}

Menggunakan tag <script>:
<script type="syntaxhighlighter" class="brush: java"><![CDATA[ masukan syntax java disini ]]></script>, contoh:

<script type="syntaxhighlighter" class="brush: java"><![CDATA[
public static void keterangan(char x){
if (x == 'A')
System.out.println("Selamat, Anda lulus dengan nilai: "+x);
else if (x == 'B')
System.out.println("Selamat, Anda lulus dengan nilai: "+x);
else if (x == 'C')
System.out.println("Selamat, Anda lulus dengan nilai: "+x);
else if (x == 'D')
System.out.println("Maaf anda harus mengulang, nilai anda: "+x);
}
]]></script>

output:


No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...