Cara Menambahkan SyntaxHighlighter pada Blog

Setelah beberapa tidak memposting tutorial PHP, kali ini saya akan memposting bagaimana cara membuat SyntaxHighlighter pada blog. Hasilnya seperti gambar berikut :

SyntaxHighlighter

Biar semua code yang akan kita sampaikan terlihat bagus di blog, langsung saja tutorialnya.

1. Login terlebih dahulu ke blog anda
2. Pilih blog anda
3. Klik Menu Template > Edit HTML
4. Kemudian CTRL + F cari kata </head>, kemudian paste code berikut sebelum </head> :

   <!--Crayon Syntax Highlighter For Blogger-->
   <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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
   <script language='javascript'> 
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
   SyntaxHighlighter.all();
   </script>
   <!--Crayon Syntax Highlighter For Blogger-->
   

5. Klik Save Template

Bagaimana menambahkan code ke dalam posting kita, jika ada code yang akan di tampilkan menggunakan SyntaxHighlighter, maka mode yang kita gunakan adalah HTML bukan Compose.

pada mode compose kita bisa menaruhnya sesuai dimana yang kita inginkan, sebelum di copy code keposting kita, kita harus convert terlebih dahulu code disini.

Jika telah di conver maka kembali ke halaman posting kita masukan code berikut :

<pre class="brush:php">

<!-- di sini code yang telah anda conver tadi -->

</pre>

<pre class="brush:php">
<!-- di sini code yang telah anda conver tadi -->
</pre>

Ingat untuk memasukan code di atas harus dalam mode HTML.

Mode HTML

Code yang akan di tampilkan dengan SyntaxHighlighter

Setelah itu publish posting anda dan lihat hasilnya, jreng jreng mantepkan gan..hehhe. Sampai di sini dulu tutorialnya semoga berguna dan bermanfaat. Jangan lupa kolom komentarnya di bawah ya gan. :D

Loading...