Showing posts with label BlogSpot. Show all posts
Showing posts with label BlogSpot. Show all posts

Cara Menggunakan SyntaxHighlighter di blogger

SyntaxHighlighter di blogger
Bagi sobat yang suka menulis tentang tutorial mengenai pemrograman atau yang mengandung script-script, seperti PHP, JavaScript, Ruby, SQL, dll. mungkin sobat bisa menambahkan SyntaxHiglighter di blog sobat agar tampilan penulisan syntax sobat lebih  menarik untuk dilihat. Dari situs resminya http://alexgorbatchev.com/SyntaxHighlighter, SyntaxHighlighter sekarang sudah versi 3.0.83. Untuk tampilan SyntaxHighlighter sobat bisa lihat contohnya pada postingan ini. Dibawah ini Langkah-Langkah instalasi pemasangan SyntaxHighlighter di blogspot sobat:

Instalasi SyntaxHighlighter di blogspot:

  1. Login ke blogger sobat.
  2. Masuk ke tab Design - Edit HTML kemudian centang Expand Widget Templates (bogger clasic). Untuk blogger tampilan baru masuk tab Template - Edit - Proceed kemudian centang Expand Widget Templates.
  3. Sebelum itu backup terlebih dahulu template sobat, hal ini untuk jaga-jaga jika nanti ada kesalahan dalam pengeditan.
  4. Cari Tag ini  </head>  untuk mempermudah pencarian gunakan Ctrl+F pada keyboard.
  5. Lalu masukkan code JavaScript ini diatas Tag  </head> :
    <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 src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/XRegExp.js" type="text/javascript"/>
    <script type="text/javascript">  
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>
    
  6. Lalu Simpan - Save template, Selesai..

Penggunaan Syntax Highlighter pada postingan:

Penggunaan Syntax Highlighter dalam postingan ada 2 cara, sebelumnya sobat harus berada dalam mode  HTML, bukan Compose:
Cara 1: dengan menggunanakan Tag  <script>....</script>  , berikut contohnya penggunaannya:
<script class="brush: html" type="syntaxhighlighter">
...... Script sobat yg mau di tampilkan.........
</script>
Cara 2: dengan menggunakan Tag  <pre>....</pre> , Penulis lebih suka menggunakan cara yg kedua, lebih simple... :D, berikut contoh penggunaannya:
<pre class="brush: html">...Script sobat yang mau ditampilkan....</pre>


Penjelasan : syntax yang ingin sobat tampilkan harus diletakkan di antara tag  <script class="brush: html" type="syntaxhighlighter"> dan  </script>  atau  <pre class="brush: html">  dan  </pre> Pada class="brush: html" , tulisan yang berwarna merah merupakan brush alias atau type syntax yang ingin sobat gunakan. Pada contoh syntax diatas penulis menggunakan type syntax (brush alias) html. Jika sobat ingin menulis syntax dalam bentuk PHP atau JavaScript atau yang lain, sobat hanya tinggal merubah tulisan yang berwarna merah tersebut dengan php (untuk type syntax php) atau js (untuk type syntax javascript) atau yang lainnya sesuai kebutuhan sobat.
Berikut daftar syntax yang disediakan oleh SyntaxHighlighter:
Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js
  • Brush Name adalah jenis syntax yang ingin digunakan
  • Brush Aliases adalah class yang harus digunakan
  • File Name adalah file .js yang diperlukan
Okeh sampai sini semoga sobat sudah paham, bagi yang berminat silahkan mencobanya...
Perhatian.!! Jika pada saat di publish muncul pesan kesalahan seperti ini di blog sobat, 
boelshare | error syntax highlighter
abaikan saja, kilk "Berhenti menampilkan galat HTML untuk badan entri ini".
Read More

Recent Comments

Free Page Rank Tool
alexa rank. boelshare
Free Auto Backlinks boelshare.blogspot.com
free search engine submission The American Directory TK Free Web Directory Bloggers - Meet Millions of Bloggers

free counters
Internet Blog DirectoryComputers Blogs
blog directory
eXTReMe Tracker
Software
Personal Blogs
Hot! Free Download Software Full Version W3 Directory - the World Wide Web Directory

free link

 

Selamat Datang! di Blog Boelshare.