Membuat Block Untuk Kode/Script Program Di Website ataupun Blogger

Disini kita akan menggunakan SyntaxHighlighter versi 3. SyntaxHighlighter adalah sebuah highlighter kode syntax yang dikembangkan menggunakan JavaScript. Berikut adalah contoh tampilannya:

<head>
    <title>HTML Title</title>
</head>
<body> 
    <p>Hello World !</p> 
</body>
</html>

Sejumlah orang yang paham tentang sxntax sulit untuk mempublikasi kodenya di website mereka. Banyak dari mereka "mengakalinya" dengan cara memberi warna pada setiap tulisan kodenya, atau cara lainnya. Namun seiring dengan majunya teknologi, sekarang kita bisa menggunakan SyntaxHighlighter yang diciptakan oleh Alex Gorbatchev dibawah MIT License atau GNU General Public License (GPL).

Lalu bagaimana menggunakannya?
Jika anda akan menggunakannya di website pribadi anda dimana anda dapat mengupload file ke situs anda, silahkan kunjungi LINK INI untuk mendownloadnya.

Namun jika anda menggunakan Blogspot atau situs dimana anda tidak bisa mengupload file, anda tidak perlu mendownload filenya... langsung saja menuju Dashboard > Design > Edit HTML. Dalam textbox pada bagian "Edit Template", lakukan hal berikut:

1. Tekan CTRL + F lalu ketikkan "</html>" tanpa tanda kutip.

2. Copykan kode berikut di bagian diatas kode "</html>"

<!-- Syntax Highlighter BEGIN -->
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

<!-- Syntax Type -->
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- END Syntax Type -->

<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter END -->
</html>

*Catatan: pada bagian Syntax Type, dapat anda tambah atau kurangi sesuai dengan kebutuhan ("type bahasa pemrograman apa saja yang dibutuhkan) lihat http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3. Klik Save Templates.

4. lalu untuk menggunakannya, klik Dashboard > New Post

5. Terlebih dahulu pilih tab Edit HTML. Masukkan Script atau Kode didalam tag <PRE> dan tentukan class dengan brush name.

<pre class='brush:[brushname];'>

<!--Put Your Code Here (must be HTML escaped)-->

</pre>

6. kode brush:[brushname]; bisa diganti brush:html atau brush:php atau brush:cpp dan lain sebagainya

7. Pastikan bahwa script atau kode harus sudah menjadi "HTML escaped", yaitu. semua tanda "<" harus diganti dengan "&lt" tanpa tanda kutip; Ada beberapa tools yang dapat anda gunakan untuk menconvertnya!
- Encode / Decode HTML Entities
- Postable

Contoh, misal untuk menunjukkan kode JavaScript.
Tuliskan tag <pre></pre>, dan definisikan kelasnya <pre class=''></pre> dan beri nama brush <pre class='brush:js;'></pre>
selanjutnya paste kode javascript ke dalam tag

<pre class='brush:js;'>
&lt;script type=&quot;text/javascript&quot;&gt;
    var d = new Date();
    var time = d.getHours();

    if (time &lt; 10) {
        document.write(&quot;&lt;b&gt;Good morning&lt;/b&gt;&quot;);
    } else {
        document.write(&quot;&lt;b&gt;Good day&lt;/b&gt;&quot;);
    }
&lt;/script&gt;
</pre>

hasilnya seperti ini

<script type="text/javascript">
    var d = new Date();
    var time = d.getHours();

    if (time < 10) {
        document.write("<b>Good morning</b>");
    } else {
        document.write("<b>Good day</b>");
    }
</script>

Go to Top of page
_________________________________________
referensi:
- Syntax Highlighter Homepage
- Way to Blogging

Membuat Block Untuk Kode/Script Program Di Website ataupun Blogger

1 komentar