Menampilkan Source Code Program di Blogger

Bismillah, Alhamdulillah...
Bagi sahabat pembaca yang memiliki blog di blogger dan biasa membuat tulisan yang didalamnya terdapat source code bahasa pemrograman atau  sahabat pembaca yang lagi bingung dan memiliki kendala tentang "Bagaimana cara menampilkan source code program diblog ?" , semoga tulisan ini bisa memberikan jawaban dari pertanyaan tersebut.


Untuk menampilkan source code program pada blog dibutuhkan plugin Syntax Highlighter, Apa itu Syntax Higlighter ? Yup, Sintax Highligter merupakan sebuah fitur yang digunakan untuk menampilkan source code suatu bahasa pemrograman dalam HTML. Selain untuk menampilkan source code program, alasan lain menggunakan Syntax Highlighter adalah tampilan teks kode akan terlihat lebih rapi, menarik, indah dipandang, serta menjadi pembeda antara bagian tulisan dan source code program.

Bagaimana cara memasang Syntax Highlighter ?

• Pada Halaman Dasbor, Pilih Rancangan (Design)
• Pada tab Rancangan (Design), Pilih Edit HTML
• Backup Template | Download Template Lengkap
• Centang | Expand Template Widget
• Cari kode </head> | Tekan Crtl+F
• Selipkan kode dibawah ini diatas </head>
• Simpan Template

Plugin bahasa pemrograman yang digunakan pada sisipan kode diatas ada 12 yaitu,
C++, C#, CSS, Java, Javascript, Php, Python, Ruby, Sql, Vb, Xml & Perl. Ini bisa diketahui dengan melihat nama filenya. Coba amati kode Javascript dibawah ini

shBrushPython.js , yang berada pada bagian akhir script merupakan nama filenya dengan ekstensi .js (Javascript). Nah, jika bahasa pemrograman yang diinginkan tidak terdapat pada contoh diatas, bisa ditambahkan dengan menyisipkan kode diatas dan ganti nama filenya. Untuk mengetahui nama file  bahasa pemrograman bisa dilihat pada tabel di pembahasan berikutnya

Bagaimana cara menerapkannya ke Blog ?
Pengaktifan Syntax Higlighter bisa dilakukan dengan 2 cara :

1. Meggunakan kode Javascript
Contoh :
<script class="brush : Nama alias" type="syntaxhighlighter">
...Source kodemu disini....
</script>
 
2. Menggunakan kode HTML
Contoh :
<pre class="brush: Nama Alias">
...Source kodemu disini....
</pre>

Selengkapnya bisa dilihat pada tabel dibawah ini :

Nama Brush	Alias Brush	Nama File
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js/td>
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Sumber : Boelshare