Memasang Syntax Highlighter di Blogger

By Heru Iryanto 30 Nov, 2012 Post a Comment

Pernah melihat kode program di web/blog yang berwarna-warni layaknya melihat kode program di text editor komputer kamu, seperti gambar disamping. Yup...itu namanya Syntax Highlighter. Syntax Highlighter membuat kode program kamu yang ada di web/blog menjadi sama seperti di text editor kamu layaknya memakai Komodo Edit atau Dreamweaver ataupun program text editor lainnya. Jadi lebih indah kan berwarna-warni, lebih enak dilihat, dan lebih enak dibaca. Kalau di wordpress hosting berbayar sudah ada plugin untuk itu, kalau untuk di blogger berikut ini langkah-langkah memasangnya :

1. Backup terlebih dahulu template blogger kamu.
2. Setelah dibackup, masuk ke Dashboard - Design - Edit HTML
3. Tekan CTR+F dan cari kode </head>
4. Copy code di bawah ini :

<!--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-->

5. Paste tepat di atas kode </head> yang tadi kamu cari.
6. Preview template kamu, jika tidak ada error simpan template itu.

Cara penggunakaannya bisa dengan 2 metode :
1. <pre> tag
Penulisannnay seperti ini :

<pre class="brush:html">
Your 'HTML' code goes here
</pre>

Untuk daftar brush yang tersedia sebagai berikut :

ActionScript3 : as3, actionscript3
Bash/shell : bash, shell
ColdFusion : cf, coldfusion
C# : c-sharp, csharp
C++ : cpp, c
CSS : css
Delphi : delphi, pas, pascal
Diff : diff, patch
Erlang : erl, erlang
Groovy : groovy
JavaScript : js, jscript, javascript
Java : java
JavaFX : jfx, javafx
Perl : perl, pl
PHP : php
Plain Text : plain, text
PowerShell : ps, powershell
Python : py, python
Ruby : rails, ror, ruby
Scala : scala
SQL : sql
Visual Basic : vb, vbnet
XML : xml, xhtml, xslt, html, xhtml

Untuk kode program kamu, harap di-convert dulu disini : http://accessify.com/tools-and-wizards/developer-tools/quick-escape/ agar tidak terjadi error.

2. <script> tag
Penulisannya seperti ini :

<script type="syntaxhighlighter" class="brush:html"><![CDATA[
Your 'HTML' code goes here
]]></script>

Jika memakai tag ini, maka kode program tidak perlu di-convert terlebih dahulu.

Contoh hasil menggunakan syntax highlighter :

<html>
   <head>
      <title>Belajar Syntax Highlighter</title>
   </head>
   <body>
      <a href="http://heruiryanto.blogspot.com">Link Untuk Belajar</a>
   </body>
</html>

Jika tidak ingin menggunakn cara syntax highlighter yang telah saya sebutkan diatas, kamu juga bisa menggunakan cara lain yaitu melalui situs pastebin.com, hasilnya hampir sama dengan syntax higlihgter diatas, yaitu sebagai berikut :

Semoga bermanfaat.

Sumber : cyberack.com

Memasang Syntax Highlighter di Blogger

No comments for "Memasang Syntax Highlighter di Blogger"

Post a Comment