بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
Blog Mas Rifky - Wah! udah gk terasa gk lama share artikel nih semenjak saya sakit belakangan ini. Dan hari ini saya akan memosting sebuat artikel tentang
Mengubah Dan Mengganti Syntax Highlighter Blog. Nah, syntax ini berbeda loh dari yang lain, Syntax Highlighter ini mempunya beberapa fitur yaitu
View Source, Copy To Clipboard, dan Print. Fitur ini pasti mempunya sebuah fungsi yaitu memudahkan seseorang untuk mengcopas sebuah kode yang terdapat didalam Syntax Highlighter.
Ada 8 macam theme yang digunakan oleh Syntax Highlighter ini:
- Theme Default, kodenya ( shThemeDefault )
- Theme RDark, kodenya ( shThemeRDark )
- Theme Midnight, kodenya ( shThemeMidnight )
- Theme MDUltra, kodenya ( shThemeMDUltra )
- Theme FadeToGrey, kodenya ( shThemeFadeToGrey )
- Theme Emacs, kodenya ( shThemeEmacs )
- Theme Eclipse, kodenya ( shThemeEclipse )
- Theme Django, kodenya ( shThemeDjango )
Untuk membuat Syntax Highlighter ini sangat mudah. Disini saya akan menjelaskannya dengan singkat dan jelas senhingga mdah untuk dimengerti.
TUTORIAL MEMBUAT SYNTAX HIGHLIGHTER
- Masuk ke tab Template >> Edit HTML lalu cari kode </head> dan pastekan kode dibawah ini tepat diatasnya.
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>
KET:
Untuk mengganti temanya anda hanya perlu mengganti
shThemeDefault dengan 8 tema diatas yang telah saya tulis dibagian atas. Dan untuk merubah ukuran fontnya cukup mengganti 76% dengan ukuran yang kalian inginkan.
- Setelah kalian meletakkan kode tersebut carilah kode </body> dan letekkan kode dibawah ini tepat diatas kode </body>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
- Save Template Kalian.
- Sekarang masuk ke Mode HTML pada postingan kalian dan letakkan kode dibawah ini pada postingan kalian.
<pre class="brush: xml;highlight: [2,4];">
Taruh kode/artikel anda disini
</pre>
Sekian tutorial ini saya sampaikan. Semoga bermanfaat bagi kalian semua yang telah mengunjungi blog tutorial saya.
Terima Kasih.
