210 views 21 comments

SyntaxHighlighter : Paparkan Code Snippets Pada Entri Blog

by on October 16, 2010
 

SyntaxHighlighter (SH) adalah satu cara untuk memaparkan code snippets bagi memudahkan pengunjung/korang sendiri melihat code tersebut. Apabila korang menggunakan SyntaxHighlighter ini, ia akan memberi paparan yang lebih cantik dan tersusun untuk code tersebut. Ia juga membantu korang mengenal pasti code-code yang salah. Sebelum ini, pelbagai cara yang aku gunakan untuk memaparkan code-code didalam entri aku. Tetapi, selepas mencuba SyntaxHighlighter ini aku tidak bersusah payah lagi. Seperti biasa, aku akan berkongsi langkah untuk memasang SyntaxHighlighter didalam WordPress dan Blogger. Hari ni aku mulakan tutorial untuk pengguna Blogger/Blogspot, dan diakhiri dengan WordPress.

a. Blogger/Blogspot

Bagi yang beragama Islam, mulakan pemasangan dengan bacaan Bismillah. Semoga proses pemasangan berjalan lancar.

1. Untuk memulakan pemasangan SH ni, sudah semestinya korang kena log masuk dahulu ke dalam akaun Blogger korang. Seterusnya, pergi bahagian Design > Edit HTML.

Dicadangkan korang melakukan backup dahulu terhadap template blog korang sebelum pemasangan bermula.

2. Cari code ]]></b:skin> dengan menggunakan kekunci CTRL + F. Masukkan code dibawah sebelum code yang korang cari tadi dan save template. Pastikan tiada error berlaku.

[php].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; }
[/php]

3.Seterusnya, masukkan code dibawah sebelum </head>. Save template korang sekali lagi dan pastikan tiada error.

[php]
<!– Add-in CSS for syntax highlighting –>
<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/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>
[/php]

4. Akhir sekali, masukkan code dibawah sebelum </body> tag. Save Template, pastikan tiada error berlaku, dan proses pemasangan sudah selesai.

[php]
<!– Add-in Script for syntax highlighting –>
<script language=’javascript’>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>
[/php]

5. Untuk mengaktifkan SH ini, korang perlu memasukkan code dibawah semasa menulis entri/post dengan menggunakan ruangan Edit HTML.

[php]
<pre name="code" class="cpp">
…Your html-escaped code goes here…
</pre>
[/php]

Harap maaf. Buat masa ini, code tersebut tidak mempunyai scroll. Mungkin jika korang berkongsi code yang agak panjang, ia akan memberi kesan kepada height entri.

b. WordPress

Tak perlu lah demo kot. So, aku teruskan ye dengan langkah pemasangan SH.

1. Pastikan korang pengguna WordPress Self-Host. Ini kerana, korang perlu mengupload file SH tersebut. Untuk tutorial ini, aku menggunakan plugin SyntaxHighlighter Evolved.

2. Muat turun plugin SyntaxHighlighter Evolved dan uploadkan ia kedalam directori wp-content/plugins.

Muat-turun Syntax Highlighter Evolved via WordPress Plugin Directory

3. Dah uploadkan? Pastu gi kat Dashboard WordPress korang seterusnya ke Plugins dan aktifkan plugin yang korang upload sebentar tadi.

4. Lakukan setting pada plugin tersebut di Settings > Syntax Highlighter. Dan ia terpulang pada cita rasa korang.

5. Untuk mengaktifkannya, korang boleh memilih salah satu daripada langkah dibawah. Tidak kisah korang menggunakan bahagian Visual atau pun HTML.

Selamat mencuba. Jika ada sebarang pertanyaan atau permintaan, korang boleh hubungi aku melalui email.

Kongsikan Artikel Kami
comments
 
Leave a reply »

 

Leave a Response