SyntaxHighlighter : Paparkan Code Snippets Pada Entri Blog

Ditulis oleh

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

Lihat Demo

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.

Komen

  • Pingback: myebuzz.net

  • Pingback: IMCurtain.com

  • nak tahu, kalau script tu tak digunakan adakah dia akan tetap dipanggil? maksud aku kalau kita guna tag php adakah tag css akan dipanggil sekali? sebab aku pernah try gak syntax macam ni *tak ingat nama* tapi dia download semua T_T berat gila blog jadinya

    syafiq.net Oct 16, 2010 3:52 pm Reply
    • script tak digunakan dipanggil… kalau tak silap aku, takde kot.. sebab kalau ko pakai [php]afada[/php] tue baru jadi..
      performance blog pun takdela berat sangat

      Mr Piratz Oct 16, 2010 3:54 pm Reply
  • aku post gna Live Writer, script cam CSS & HTML direct copy and paste je.. tp script tu x convert jd yg actual la.. mcm entri yg ni http://blynkdontbyte.blogspot.com/2010/09/how-to-add-jquery-effect-in-thumbnail.html

    tp kalo ada syntax highlighter ni pun ok gak.. nmpk kemas lg..

    ZoOL Oct 16, 2010 8:50 pm Reply
  • ic man..
    ini yang aku cari selama nih..
    thanks bro..
    cun la..huhu

    syahrilhafiz Oct 16, 2010 10:10 pm Reply
  • Thanks bro. memang smart.

    Affan Oct 17, 2010 12:06 am Reply
  • apsal la lambat ko memperkenalkan menatang ni.. dari dulu aku dok carik syntax highliter evolved tu.. minggu lepas baru jumpa..

    topo Oct 17, 2010 1:57 am Reply
    • la.. ko tak tanye..

      Mr Piratz Oct 17, 2010 1:59 am Reply
    • same ah dengan aku topo.. hohoho.. dah lame aku carik mende alah ni. baru ni jumpe.. kesian aku. tu ah.. hang lokek lagi ilmu.. haha

      Kreuger Oct 19, 2010 11:30 pm Reply
      • Bukan lokek, tapi hangpa berat mulot nak tanye.. aku mana tau hangpa nak.. :laugh:

        Piratz Oct 20, 2010 12:16 am Reply
  • menarik punya plugin
    tapi buat masa sekarang tak guna lagi hehe

    Syafrizal Oct 17, 2010 11:30 am Reply
  • owh macam tuh..memang cantik nih….

    zik Oct 19, 2010 5:59 pm Reply
  • Da lama aku perasaan camne ko boleh ada macam box ni
    Siap show source cantik jek
    Kemas lah aku tengok
    Thanks!

    nizam6281 Oct 23, 2010 1:30 am Reply
    • Tak tau la samaada ko perasan atau tak, aku memang akan susun suma entri aku.. aku tak suka blog lari lagi alignment.. bla.. bla.. bla… :grin:

      Mr Piratz Oct 23, 2010 1:42 am Reply
      • Blog lagi allignment?

        Pelik jek ayat hang ni

        nizam6281 Oct 23, 2010 9:29 am Reply
        • dah betulkan dah.. :angry:

          Mr Piratz Oct 23, 2010 1:34 pm Reply
          • Eleehhh
            Selalu aku jek kena kalau salah typo
            ni ang plak haha

            Aku da centerkan widgets aku dan lain2 ok tak?

            nizam6281 Oct 23, 2010 2:25 pm

Leave a Comment

Your email address will not be published. Required fields are marked *