Oct 14, 2013

Menambahkan Syntax Highlighter Pada Postingan Blog Dengan Line Numbers

  No comments
Screenshot SyntaxHighlighter Pada Blogger

Dalam kesempatan kali ini saya ingin berbagi cara menambahkan SyntaxHighlighter pada postingan blog.
Untuk lebih jelasnya mengenai SyntaxHighlighter bisa anda temukan disini http://alexgorbatchev.com/SyntaxHighlighter/

Oke langsung saja, pertama masuk ke akun Blogger anda
lalu pilih blog anda
pilih pengaturan Template
lalu piih Edit HTML
carilah code </head> lalu paste script code dibawah ini di atas code </head> tersebut


<!-- SyntaxHighlighter by Alex Gorbatchev (afh4mz.blogspot.com) -->
<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 = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter by Alex Gorbatchev (afh4mz.blogspot.com) -->


Lalu klik Simpan Template
Sekarang cobalah anda membuat entri/postingan baru
agar bisa menggunakan SyntaxHighlighter tadi gunakan pengeditan HTML (lihat gambar)
lalu copy kan code berikut
<pre class="brush: html">
XXXX
</pre>

lalu kembalikan lagi ke pengeditan Compose biasa dan ubahlah XXXX dengan text/script yang ingin anda buat menjadi SyntaxHighlighter

CATATAN: terdapat kode "brush: html" --> sesuaikan kode nya dengan bahasa yang anda akan ketikkan, misal anda menggunakan bahasa C maka ubahlah menjadi "brush: c

berikut daftar syntax/bahasa yang support untuk SyntaxHighlighter
BRUSH NAMEBRUSH ALIASESFILE NAME
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js
  • Brush Name adalah jenis syntax yang ingin digunakan
  • Brush Aliases adalah class yang harus digunakan
  • File Name adalah file .js yang diperlukan

Sekian cara untuk membuat SyntaxHighlighter pada postingan blog, semoga bermanfaat :)

No comments :

Post a Comment

What do you want? Just leave a comment :)

*choose an emoticon below