Syntax Highlighter dengan Tombol Source Code, Copy & Print Untuk Blogger

Apa Pengertian Syntax Highlighter? Syntax Highlighter adalah fitur dari teks editor yang berfungsi untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan istlah kategori dan mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup.

Syntax Highlighter merupakan sebuah media yang sering digunakan oleh para webmaster maupun blogger untuk membuat sebuah kolom untuk menempatkan source kode seperti JavaScript, HTML, CSS, PHP, XML dan lain sebagainya sehingga tampilannya terlihat lebih unik dan menarik.




Untuk postingan ini, saya akan berbagi kepada anda tentang cara memasang Syntax Highlighter yang dilengkapi dengan tombol Source Code, Copy to Clipboard, Print dan Help.

Bagaimana Cara Menginstall ke dalam Template?

Perhatikan langkah-langkah berikut ini dan saya akan memberikan penjelasan singkat dan  mudah.
  • Login ke Blogger
  • Pilih Template › Edit HTML › Proceed
  • Cari dan Temukan tag ]]></b:skin> kemudian copy kode di bawah ini dan pastekan tepat dibawah tag ]]></b:skin> tersebut.
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
  • Simpan Template

Bagaimana Cara Penggunaannya?

Copy salah satu kode di bawah ini kemudian pastekan kedalam HTML postingan, tapi ingat pilih salah satu kode saja, misalnya untuk kode CSS, maka pilih <pre class="brush:css"> kemudian sisipkan kode CSS tersebut diantara tag pembuka dan penutupnya. Berikut tag dari masing-masing kode :
  • CSS
<pre class="brush:css">
Masukkan kode CSS disini
</pre>
  • HTML
<pre class="brush:html">
Masukkan kode HTML disini
</pre>
  • Javascript
<pre class="brush:js">
Masukkan kode Javascript disini
</pre>
  • PHP
<pre class="brush:php">
Masukkan kode PHP disini
</pre>
  • SQL
<pre class="brush:sql">
Masukkan kode SQL disini
</pre>
Jika anda mengalami kesulitan dalam penggunaanya, silahkan memberikan komentar di bawah. 

Lost Sector
Lost Sector