Selamat datang di KokoDodi.blogspot.com. Pada kesempatan kali ini saya akan membagikan tutorial untuk Membuat Syntax Highlighter di Blogspot. Tutorial ini tentunya sangat cocok bagi anda yang suka menempatkan Kode Program (Source Code) didalam postingannya. Syntax Highlighter merupakan sebuah fitur yang ada didalam beberapa Text Editor bahasa pemrograman tertentu untuk menampilkan warna pada Kode Program yang diketikkan sehingga membantu programmer untuk melihat kesalahan dan membaca program. Lalu bagaimana caranya kita meletakkannya di Blogspot kita? Simaklah pembahasan saya dibawah ini.
Syntax Highlighter di Blogspot memiliki tampilan layaknya seperti text editor Notepad++, sehingga pembaca dapat membedakan mana yang merupakan isi artikel dan mana yang merupakan Kode Program (Source Code). Kode Syntax Highlighter ini dibuat oleh Alex Gorbatchev (2004-2008). Syntax Highlighter ini juga memiliki beberapa fitur manarik, diantaranya adalah adanya fitur untuk print, view plain, dan help.
Fitur Print digunakan untuk mengeprint Kode Program (Source Code) yang kita ketikkan didalamnya. Fitur View Plain merupakan fitur untuk menampilkan Kode Program (Source Code) kedalam bentuk pop up browser. Sedangkan Fitur Help adalah fitur bantuan yang telah disediakan oleh Syntax Highlighter ini sendiri.
Untuk membuat Syntax Highlighter di Blogspot anda dapat mengikuti langlah-langkah dibawah ini.
Langkah Pertama :
Silakan login ke akun Blogger kalian. Setalah itu bukalah dashboard blog yang ingin anda masukan Syntax Highlighter. Setelah memasuli Dashboard Blog silakan pilih Template lalu Edit HTML.
Langkah Kedua :
Masukkan kode dibawah ini diantara kode <head> dan </head>.
<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>Langkah Ketiga :
Carilah kode ]]></b:skin>. Gunakan CTRL + F untuk mempercepat pencarian. Lalu masukan kode dibawah ini diatas kode tersebut.
.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, 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;
}
.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-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: 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; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
Langkah Keempat :Carilah kode </body> lalu masukan kode dibawah ini diatasnya.
<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Langkah Kelima :Simpan template anda. Lalu untuk menggunakan Syntax Highlighter tersebut anda dapat mengetikkan kode dengan format.
<pre name="code" class="BahasaProgram"> Masukan Kode Program Anda Disini </pre>Ubahlah BahasaProgram dengan bahasa yang ingin anda gunakan. Bahasa yang dapat anda gunakan dalam Syntax Highlighter ini adalah Core, Cpp, Csharp, Css, Delphi, Java, Jscript, Php, Phython, Ruby, Sql, Vb dan Xml (Penulisan besar kecilnya harus sesuai dengan yang saya contohkan ini).
Itulah tutorial dari saya tentang cara Membuat Syntax Highlighter di Blogspot. Semoga artikel saya ini dapat bermanfaat. Sekian dari saya dan terima kasih sudah berkunjung.
Tingkatkan Penjualan anda dengan mempunyai toko online di Kuka.co.id. Kuka Aku Suka menyediakan berbagai macam brand local Indonesia yang pastinya banyak diminati oleh penduduk Indonesia.
ReplyDeleteSist, mau beli makanan lokal online dimana ya? Apa? Kedai Kuka? Dimana tuh? Ini nih bagi yang belum tau apa itu Kedai Kuka. Kedai Kuka adalah suatu website yang menjual berbagai macam produk pangan lokal Indonesia. Yuk buruan kunjungi kedaikuka.co.id
ReplyDelete