Seperti yang kita ketahui SyntaxHighlighter merupakan fitur editor yang menampilkan teks, terutama teks yang berupa kode dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri. Pada kesempatan kali ini kita akan mempercantik tampilan syntax highlighter pada blog menjadi lebih berwarna, sehingga pengunjung blog tidak akan bosan berkunjung ke blog kita.
Fitur yang ada dalam syntax highlighter shortcode ini yakni memberi penomeran otomatis pada masing - masing code sehingga code terlihat lebih terorganisir. Untuk blog yang berniche tutorial blogger biasanya tidak akan lepas dari yang namanya share code CSS, HTML, Javascript dalam tutorialnya. Saya rasa syntax highlighter shortcode ini merupakan jawabannya, selain mudah digunakan juga mempunyai fitur yang menarik seperti print code dll. Dengan Syntax Highlighter Shortcode kita dapat menambahkan code tidak hanya di dalam posting atau widget sidebar tetapi kita juga bisa menyisipkan dalam komentar. Penasaran bagaimana caranya? Mari kita mulai tutorialnya !
Jika masih penasaran melihat hasilnya bisa melihat demo dibawah ini terlebih dahulu !
1. Instal Pluggin Blogger Shortcode
Agar syntax highlighter shortcode shortcode berjalan pada blog, anda harus menginstal terlebih dahulu plugin blogger shortcode. Untuk menginstal pluginnya silakan ikuti panduan berikut : Cara Menambahkan Plugin Blogger Shortcode
2. Menambahkan Syntax Highlighter Style
a. Silakan anda masuk ke dashboard > Template > Backup template
b. Pilih edit HTML
c. Cari code </head>
d. Pastekan Code berikut diatasnya
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
e. Simpan template.
Costumisasi :
Untuk menganti style syntax highlighter kita bisa mengganti code dibawah ini dengan style yang lain. Untuk stylenya sendiri sudah ada banyak, anda tinggal memilih syle yang cocok dengan template anda. Silakan dicoba :)
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
Style/ theme SyntaxHighlighter
a. Django Theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
b. Emacs theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
c. Fade to Grey theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
d. Eclipse theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
e. Midnight theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
f. RDark theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
Jika masih belum puas silakan edit stylenya sendiri :)
3. Cara Penggunaan
Menyisipkan syntax highlighter cukup mudah, anda hanya perlu menambahkan shortcode berikut :
[code] Code yang dipublish [/code]
Syntax highlighter ini bisa kita gunakan dimana saja, baik dalam posting, widget sidebar maupun dalam komentar. Jadi sangat praktis. Mungkin saya cukupkan sekian tutorial kali ini, jika ada salah kata admin mohon maaf.
Comments
Post a Comment