Cara Mudah Membuat Syntax Highlighter di Blog
Syntax highlighter adalah salah satu cara bagaimana kita memposting kode program kedalam web/blog dengan tampilan yang begitu menawan dan tidak merusak tampilan blog kita, seperti contoh gambar dibawah ini, tampilan code yang kita posting didalam blog kita dapat tampil cukup menarik dan keren
Gimana sobat cukup keren kan?....dan jika ingin memasang pada blog sobat, mari simak langkah - langkahnya dibawah ini:
1- Jika ingin menyimpan kode CSS seperti ini kode nya
2- Jika ingin menyimpan kode HTML seperti ini kode nya
3- Dan untuk menyimpan kode JS seperti ini kode nya
Postingan juga harus mode EDIT HTML jika ingin menggunakan sintax Hightlighter ini.
Gimana sobat cukup keren kan?....dan jika ingin memasang pada blog sobat, mari simak langkah - langkahnya dibawah ini:
- Login Ke Blog Sobat
- Pada Dasbor Pilih ==>>Rancangan==>Kemudian EDIT HTML
- Cari Kode </head> Dan Letakan Kode dibawah ini dan letakan Tepat Diatas Kode </head>
<!-- Add-in CSS for syntax highlighting --> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/> <!-- Add-in Script for syntax highlighting --> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <!-- End code hilight -->
- Save template
1- Jika ingin menyimpan kode CSS seperti ini kode nya
<pre class="brush: css"> Letakkan Kode CSS Disini </pre>
2- Jika ingin menyimpan kode HTML seperti ini kode nya
<pre class="brush: html"> Letakkan Kode HTML Disini </pre>
3- Dan untuk menyimpan kode JS seperti ini kode nya
<pre class="brush: js"> Letakkan Kode JavaScript Disini </pre>
Postingan juga harus mode EDIT HTML jika ingin menggunakan sintax Hightlighter ini.
sumber: http://359imbox.blogspot.com
Category: Tutorial Blogger