Cara Memasang Syntax Highlighter pada Blogger

SyntaxHighlighter merupakan sebuah layanan yang memungkinkan Anda bisa menuliskan script kode dengan rapih. Dengan SyntaxHighlighter, baik ukuran, warna tulisan sudah didesain sedemikian rupa sehingga syntax Anda terlihat indah pada blog/website.
Dibandingkan dengan hanya menuliskan syntax/script biasa secara manual, script Anda akan terlihat tidak enak untuk dibaca, dikarenakan font-nya sama dengan teks biasa. Kode program membutuhkan tipe font yang khusus dan warna yang khusus pula untuk setiap fungsi yang terkait. Dalam tutorial kali ini, ajarin.net mencoba berbagi seputar bagaimana caranya memasang syntax highlighter pada blogger.

1. Copy kode dibawah ini dan paste sebelum tag </head> atau bisa juga setelah tag <head>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

2. Kemudian, jika ingin memasukan sebuah syntax/script, pilihlah penulisan HTML dan letakan kode ini di tempat yang Anda inginkan untuk menuliskan script Anda.


Memasang Syntax Highlighter pada Blogger

1
2
3
4
5
6
7
8
9
<script type="syntaxhighlighter" class="brush: html"><![CDATA[

<html>
<head>
<title>Coba SyntaxHighlighter ah...</title>
<meta name="title" content="Belajar memasang SyntaxHighlighter" /> 
<meta name="description" content="Semoga saja berhasil dipasang, biar script terlihat keren ^_^" 

]]></script>

Untuk tulisan yang berlatar belakang warna merah (html), sesuaikan dengan kode yang Anda tulis. Dan dari baris ke 3-7 itu merupakan syntax/kode/script Anda.
Untuk tulisan html bisa dirubah, misalkan dirubah dengan java, c, cpp, php, dll. Sesuaikan dengan source yang Kita minta dari http://alexgorbatchev.com. Jadi tidak hanya html saja yang bisa, melainkan java, c, cpp, dll.
Pergi ke link ini untuk melihat cara penulisan brush SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
Pada contoh ini, brush yang bisa hanya script untuk C, C++, C#, CSS, Java, JavaScript, PHP, SQL, Visual Basic, XML, dan HTML. Anda tentu bisa menambahkan syntax perl, ruby, phyton, dengan meminta file javascript dari http://alexgorbatchev.com (langkah nomor 1 ditambahkan link source javascript).

Setelah menggunakan Syntax Highlighter, bagaimana hasil dari kode html yang di atas?
seperti inilah hasilnya:

Ada juga cara yang lebih sederhana untuk menuliskan kode SyntaxHighlighter ini, yaitu:
1
2
3
<pre class="brush: java">
###Kode/Syntax/Script Anda Di sini###
</pre>

Kode di atas merupakan untuk menuliskan kode pada SyntaxHighlighter dengan brush "java". Sama halnya dengan yang di atas, brush-nya bisa dirubah, tergantung dari script Anda tentunya. Memasang Syntax Highlighter ini sangat penting, mengingat kenyamanan pembaca yang membaca script Anda.

Cukup sekian cara memasang Syntax Highlighter pada blogger dari ajarin.net, jika ada pertanyaan silakan berkomentar di bawah, dan tak lupa pula Saya berterima kasih karena Anda telah berkunjung pada blog sederhana ini. Salam ajarin!

No comments:

Post a Comment