Menambahkan Syntax Highlighter Pada Blogger / Adding Syntax Highlighter On Blogger

Contoh Syntax Highlighter

wah, sudah lama sekali saya tidak memposting tutorial. Akibat pusing memikirkan skripsi. ha3. walaupun sampai saat ini skripsi saya belum selesai... [i_-_].. (sedikit curhat... :D)

Baiklah, sekarang saya akan memposting tutorial sederhana tentang menambahkan Syntax Highlighter pada blogger.

Bagi yang belum tahu, Syntax Highlighter itu merupakan tools yang berfungsi untuk menampilkan sintak-sintak di blog. Biasanya digunakan oleh orang yang ingin memposting tutorial tentang pemrograman.

Baiklah, seperti biasa. Langsung ke pokok permasalahannya biar pembaca tidak bosan... ha3.

1. Login ke blog Anda.

2. Ketika di "Dashboard", masuk ke "Design"

3. Klik "Edit HTML"

4. Jangan lupa backup dahulu Template Anda dengan mengklik "Download Full Template"

5. copy kode dibawah ini:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!--SYNTAX HIGHLIGHTER BEGINS--> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></script> <script language="javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <!--SYNTAX HIGHLIGHTER ENDS-->

6. Ketika di Template, Tekan "CTRL+F" pada keyboard Anda, kemudian ketikkan "</head>" untuk mencari kode tersebut

7. paste kode yang sudah di copy tepat diatas sintak "</head>"

8. Klik "Preview" untuk memastikan bahwa Syntax Highlighter sudah terpasang dengan benar

9. Klik "Save Template"

Syntax Highlighter mendukung beberapa sintak, yaitu:

Language	Aliases
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Untuk mempergunakan tools ini, cukup ketikan sintak pada bagian "Edit Html" ketika berada di Edit Posts seperti sintak di bawah ini:

<pre class="brush: html">

(ketikkan sintak diantara tag ini)

</pre>

atau

<script type="syntaxhighlighter" class="brush:html"><![CDATA[

(ketikkan sintak diantara tag ini)

]]></script>

html pada pre ataupun script, dapat diubah sesuai dengan aliases pada tabel di atas.

apabila ingin memposting kode javascript, maka html diubah menjadi js atau dapat juga diubah menjadi jscript ataupun javascript

berikut adalah perbedaan antara pre dengan script:

?

1 2 3

public static final String contoh = "Ini Contoh menggunakan pre";

?

1	public static final String contoh = "Ini Contoh menggunakan script";

Bagaimana???, apakah terlihat bedanya??? karena saya sendiri tidak melihat perbedaannya... kecuali baris yang digunakan... ha3... (saya kira ada perbedaan di sintak dan sebagainya)

NB: Semua tutorial yang Saya berikan sudah Saya coba terlebih dahulu dan hasilnya adalah berhasil.

Mohon maaf apabila terdapat kesalahan atas artikel ini.