Bagi seorang programmer yang suka menulis pada halaman blog maupun situs web-nya, tentu terkadang ia ingin membagi dan menjelaskan suatu code pemrograman. Kadang ia ingin membagikan ilmu yang dimilikinya. Source code tidak bisa ditulis sama tulisan artikel lainnya, bisa-bisa membuat pembaca tidak mengerti tentang source code itu. Alangkah baiknya suatu source code dituliskan memiliki kemiripan dengan bahasa pemrograman yang ditulis.Istilah kerennya haruslah highlight (berwarna sesuai dengan jenis tag bahasa). Secara default fasilitas seperti ini tidak tersedia dalam pembuatan halaman blog baik pada blogspot, wordpress, dan jenis blog lainnya. Untuk itu perlu ditambahkan beberapa script agar dapat menampilkan source code yang menawan pada web atau blog anda.
Cara Menulis Highlight Source Code (Sintak Program) pada Blog |
Cara Menulis Highlight Source Code (Sintak Program) pada Blog
1. Bukalah blog anda. Masuk ke Dashboard >> Layout >> Edit HTML.2. Cari sintak </head> pada halaman template Blogger. Anda dapat mencarinya dengan fasilitas find
(dengan menekan kombinasi CTRL+F pada keyboard).
3. Pastekan script berikut sebelum tag </head>.
<!--Syntax Highlighter-->
<b:if cond='data:blog.pageType == "item"'>
<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 async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script async='async' src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></script>
</b:if>
<!--End Syntax Highlighter-->
4. Pastekan script berikut sebelum tag </body>
<!--Syntax Highlighter-->
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--End Syntax Highlighter-->
5. Untuk mengaktifkan Syntax Higlighter, saat anda memposting source code, sisipkan kode berikut
<pre class="brush: Nama Alias">
/*ketikkan source code di sini*/
</pre>
Berikut daftar nama alias
Model Sintak | Nama Alias | 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 |
Post A Comment:
0 comments: