Satu lagi istilah yang perlu kita pahami sebagai seorang blogger, sekalipun hanya sebagai blogger "alakadarnya", seperti saya. Memahaminya hukumnya adalah wajib, demi perubahan status menjadi bukan blogger "alakadarnya" lagi.
Istilah yang dimaksud ialah Syntax Highlighter (tolong dikoreksi lagi apakah penulisannya sudah benar), yaitu suatu fitur yang berfungsi sebagai viewer juga editor yang (katanya) ini biasa digunakan oleh para Programmer bahasa coding seperti HTML, JavaSript, jQuery, dsb. Seperti apa penampakannya bisa kalian lihat contoh pada screenshot dibawah.
Adapun fitur standart yang ada pada Syntax Highlighter ialah "Print" untuk memudahkan jika ingin cetak kode dilembaran kertas, "View Plain" untuk menampilkan barisan kode pada popup window, dan "?" atau help untuk menemukan jawaban atas pertanyaan yang sering diajukan.
Jika didunia blogging biasanya ini dibuat untuk menampilkan deretan bahasa kode yang dimuat didalam posting, agar memudahkan pengunjung saat membaca serta memahami maksud penyampaian kode tersebut. Ya, fungsinya hampir sama dengan "Blockquote". Namun jika didalam Syntax Highlighter tampilan kode akan bisa otomatis berganti menjadi warna-warna tertentu berdasarkan type kode dan juga adanya susunan urut list nomor.
Kembali ke inti pembahasan kita, bagaimana membuat Syntax Highlighter di blog? Apakah sulit atau sulit sekali? Menyebutnya saja susah kok apalagi membuatnya. Hehe!
Tidak kok, untuk membuat Syntax Highlighter di blog tidak se-sulit seperti kita menyebut namanya itu. Asal kita tau caranya saja.
Teori singkatnya kita hanya perlu menambahkan script Syntax Highlighter didalam HTML template, lalu jika ingin menampilkan Syntax Highlighter didalam posting saat menulis artikel cukup tambahkan kode pemangilnya saja. Sederhana saja kan?. Lebih detail lagi langkah-langkahnya seperti ini :
1. Login di Blogspot
2. Backup template terlebih dulu, panduannya baca disini
3. Selesai backup masuk di menu "Template", lanjutkan dengan klik "Edit HTML"
4. Copy (Ctrl+C) kode script dibawah ini :
5. Paste (Ctrl+V) kode tersebut setelah kode <head> atau sebelum kode </head>
6. Tahab selanjutnya cari kode ]]></b:skin lalu Copy dan Paste CSS berikut diatas kode ]]></b:skin
7. Sabar masih ada satu lagi, Copy kode script berikut lalu letakkan diatas kode </body>. Cari bagian paling bawah di HTML template
8. Klik "Simpan template"
9. Selesai
Untuk menampilkan Syntax Highlighter dihalaman posting, yang diperlukan ialah menuliskan kode pemanggilnya dan meletakkannya bersama kode yang ingin dibuat. Cara penulisannya seperti ini :
Senang bisa berbagi (^_^)
Istilah yang dimaksud ialah Syntax Highlighter (tolong dikoreksi lagi apakah penulisannya sudah benar), yaitu suatu fitur yang berfungsi sebagai viewer juga editor yang (katanya) ini biasa digunakan oleh para Programmer bahasa coding seperti HTML, JavaSript, jQuery, dsb. Seperti apa penampakannya bisa kalian lihat contoh pada screenshot dibawah.
Adapun fitur standart yang ada pada Syntax Highlighter ialah "Print" untuk memudahkan jika ingin cetak kode dilembaran kertas, "View Plain" untuk menampilkan barisan kode pada popup window, dan "?" atau help untuk menemukan jawaban atas pertanyaan yang sering diajukan.
Jika didunia blogging biasanya ini dibuat untuk menampilkan deretan bahasa kode yang dimuat didalam posting, agar memudahkan pengunjung saat membaca serta memahami maksud penyampaian kode tersebut. Ya, fungsinya hampir sama dengan "Blockquote". Namun jika didalam Syntax Highlighter tampilan kode akan bisa otomatis berganti menjadi warna-warna tertentu berdasarkan type kode dan juga adanya susunan urut list nomor.
Kembali ke inti pembahasan kita, bagaimana membuat Syntax Highlighter di blog? Apakah sulit atau sulit sekali? Menyebutnya saja susah kok apalagi membuatnya. Hehe!
Tidak kok, untuk membuat Syntax Highlighter di blog tidak se-sulit seperti kita menyebut namanya itu. Asal kita tau caranya saja.
Teori singkatnya kita hanya perlu menambahkan script Syntax Highlighter didalam HTML template, lalu jika ingin menampilkan Syntax Highlighter didalam posting saat menulis artikel cukup tambahkan kode pemangilnya saja. Sederhana saja kan?. Lebih detail lagi langkah-langkahnya seperti ini :
1. Login di Blogspot
2. Backup template terlebih dulu, panduannya baca disini
3. Selesai backup masuk di menu "Template", lanjutkan dengan klik "Edit HTML"
4. Copy (Ctrl+C) kode script dibawah ini :
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
5. Paste (Ctrl+V) kode tersebut setelah kode <head> atau sebelum kode </head>
6. Tahab selanjutnya cari kode ]]></b:skin lalu Copy dan Paste CSS berikut diatas kode ]]></b:skin
- Agar mudah klik "view plain" - blok semua kode - copy
<div style="text-align: left;">
.dp-highlighter</div>
{
<div style="text-align: left;">
nt-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
f</div>
f
oont-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
<div style="text-align: left;">
der on top when controls are hidd</div>
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little bo
ren */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
<div style="text-align: left;">
;
border: </div>
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: non
enone;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
<div style="text-align: left;">
ckground-color: #fff;
margin:</div>
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
b
a 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
<div style="text-align: left;">
hlighter ol li,
.dp-highligh</div>
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-hi
gter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
<div style="text-align: left;">
}
.dp-highlighter.nogutter ol </div>
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
li,
<div style="text-align: left;">
.dp-highlighter .columns div
{
paddi</div>
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
ng-bottom: 5px;
}
<div style="text-align: left;">
n collapsed */
.dp-highl</div>
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties wh
eighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
<div style="text-align: left;">
g: 3px 8px 3px 10px;
font: 9px </div>
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
paddi
nVerdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
<div style="text-align: left;">
ter .tools a:hover
{
color: red;</div>
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlig
h
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
<div style="text-align: left;">
ign: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-co</div>
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-a
llor: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
<div style="text-align: left;">
ic styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-c</div>
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language speci
folor: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
<div style="text-align: left;">
</div>
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
7. Sabar masih ada satu lagi, Copy kode script berikut lalu letakkan diatas kode </body>. Cari bagian paling bawah di HTML template
<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
8. Klik "Simpan template"
9. Selesai
Untuk menampilkan Syntax Highlighter dihalaman posting, yang diperlukan ialah menuliskan kode pemanggilnya dan meletakkannya bersama kode yang ingin dibuat. Cara penulisannya seperti ini :
<pre name="code" class="JScript">dan ...
Letakkan kode Script yang ingin ditampilkan disini
</pre>
<pre name="code" class="Css">Letakkan kode CSS yang ingin ditampilkan disini
</pre>
Senang bisa berbagi (^_^)
Tentang Penulis :
Ansory EsceDia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+
Belum ada komentar untuk "Membuat Syntax Highlighter di Blog"
Post a Comment