Cara Mudah Membuat Syntax Highlight Blogger

Memang tidak terlalu berpengaruh, tapi menurut saya ini sangat penting. Dengan syntax highlight penulis dapat menuliskan kode dengan mudah, dan pembaca dengan mudah memahami apa yang dimaksudkan oleh si penulis. Simak baik-baik langkahnya

1. Buka dashboard blog anda kemudian pilih 'Template > Edit HTML'
2. Masukkan code dibawah ini sebelum tag '</head>'
   

   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
   <script language='javascript'> 
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
   SyntaxHighlighter.all();
   </script>

Cara pakai, misal saya ingin membuat dengan code ini

<table border="1">
<tr>
<td>
test syntax highlight
</td>
</tr>
</table>

Supaya mudah silahkan bisa mengkonvert HTML ke XML lewat web ini HTML to XML parser
Kemudian beralih ke mode HTML

Ketikkan seperti ini

<pre class="brush: html">
&lt;table border=&quot;1&quot;&gt;
 &lt;tr&gt;
  &lt;td&gt;
   test syntax highlight
  &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</pre>

Maka akan menjadi seperti ini

<table border="1">
 <tr>
  <td>
   test syntax highlight
  </td>
 </tr>
</table>

Links

• Web resmi SyntaxHighlighter
• Referensi Awesome code syntax highlighting made easy

*Update : dikarenakan menggunakan cara ini sering didapati kendala, maka solusinya silahkan dengan menggunakan cara ini Cara Menggunakan Github Sebagai Syntax Highlighter

Sekian mudah-mudahan bermanfaat, jangan lupa subscribe channel Youtube saya dan pastinya pantengin terus @alfanzed.
SALAM KEREN!