Skip to main content

Membuat Syntax Highlighter di Blog Dengan Mudah

By Kiki Andrean
Membuat Syntax Highlighter di Blog Dengan Mudah - Syntax Highlighter adalah suatu fitur text editor untuk meng-highlight dalam berbagai warna source code bahasa pemrograman tertentu agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Syntax Highlighter biasa digunakan di kebanyakan blog ternama untuk meng-highlight kode script yang biasa digunakan pada postingan artikel yang berisi tutorial. Syntax Highlighter akan sangat membantu pengunjung blog agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya enak dipandang mata. Di internet ada banyak jenis Syntax Highlighter, namun pada kesempatan kali ini saya hanya akan membahas Syntax Highlighter yang sering digunakan oleh blog-blog terkenal, yaitu Syntax Highlighter hasil kreasi Alex Gorbatchev.

 Membuat Syntax Highlighter di Blog Dengan Mudah



Cara Pemasangan :
  1. Login dulu ke blog 
  2. Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  3. Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di atas kode </Head> tersebut.

    <!-- Add-in CSS for syntax highlighting -->
    <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/shThemeRDark.css' rel='stylesheet' type='text/css'/>
    <!-- Add-in Script for syntax highlighting -->
    <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/shBrushAS3.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.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/shBrushColdFusion.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/shBrushCss.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.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/shBrushJava.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.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>
    <!-- End code hilight -->
  4. Klik "Save" untuk menyimpan template...

Cara Penggunaan :
Pada postingan artikel cukup menambahkan kode <pre class="brush: js">...script / css...</pre> pada mode "Edit HTML" untuk mengaktifkan Syntax Highlighter di postingan artikel, sebagai contoh penggunaan seperti penulisan kode di bawah ini.

<pre class="brush: js"> <script type="text/javascript"> function (kodeScript){var testTextSyntax = "Syntax Highlighter";} </script> </pre>
Bentuk hasil Syntax Highlighter akan terlihat seperti di bawah ini. 
<pre class="brush: js"> <script type="text/javascript">
function (kodeScript){var testTextSyntax = "Syntax Highlighter";}
</script>
</pre>

Gimana sob... kerenkan infonya... oh yaa by the way busway anyway hasil diatas menggunakan tema warna default dari Syntax Highlighter supaya lebih lengkap infonya saya juga akan berikan tambahan info untuk tema warna Syntax Highlighter biar makin komplit artikelnya...

Pilihan Tema Syntax Highlighter :
Silakan sobat pilih beberapa tema Syntax Highlighter di bawah ini supaya sesuai dengan tema template blog yang sobat gunakan. Pemasangan tema Syntax Highlighter ini cukup mudah cukup ganti kode script di atas (yang dipasang di template), seperti pada kode di bawah ini.

<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>

Kemudian ganti dengan kode tema berikut ini.
  • Django Theme
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
  • Emacs Theme
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
  • Fade to Grey Theme
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
  • Eclipse Theme
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
  • Midnight Theme
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
  • RDark Theme
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
Klik "Save" untuk menyimpan template... kemudian apabila sudah postingan artikel sobat sudah menggunakan Syntax Highlighter silakan sobat lihat hasilnya pada postingan artikel tersebut.
KLIK DISINI UNTUK DOWNLOAD



Labels:

Comments

Post a Comment

Popular posts from this blog

Lomba Menulis Puisi Terbaru 2013 | Lomba Puisi 2013

By Kiki Andrean
Lomba Puisi 2013 - Informasi Terbaru - LOMBA MENULIS PUISI TERBARU 2013 - Setelah sebelumnya saya telah share informasi mengenai " cara mendapatkan pulsa gratis im3 " dan " cara menghilangkan bau mulut " kini saya akan update lagi blog tercinta ini dengan postingan mengenai  Lomba Puisi 2013  dan saya harap dapat bermanfaat untuk sahabat netter semua. Berikut ini daftar lomba puisi 2013 Lomba Puisi Nasional IWC 2013 Akan Di Update Akan Di Update Demikianlah Informasi Kal i Ini Mengenai  Lomba Menulis Puisi Terbaru 2013  dan saya harap dapat bermanfaat untuk para pembaca setia blog ini.
Post a Comment
Read more

Mencari Data Diantara Dua Tanggal Pada SQL Server

By Kiki Andrean
Mencari Data Diantara Dua Tanggal Pada SQL Server - Mumet ngerjain Projek Kerja Praktek buat Aplikasi Pengelolaan Data Pegawai karna masalah Datatime pada SQL Server . Sekian lama mencari di mbah Google akhirnya ketemu juga. Ketemunya yang kayak begini:  Mencari Data Diantara Dua Tanggal Pada SQL Server Untuk mencari data di antara dua tanggal pada SQL Server tidak bisa kita serta-merta menyebut tanggal tersebut dalam format aslinya semisal: select nm_field from nm_table where field_date between 2010-10-10 and 2011-11-11 Penyebutan tanggal harus dikonversi dulu ke bentuk varchar, baru kemudian dibandingkan. Format konversi yang bisa digunakan adalah sebagai berikut: select convert(varchar(20),getdate(),101) -- 101 menghasilkan format : MM/DD/YYYY select convert(varchar(20),getdate(),103) -- 103 menghasilkan format : DD/MM/YYYY select convert(varchar(20),getdate(),104) -- 104 menghasilkan format : DD.MM.YYYY select convert(varchar(20),getdate(),105) -- 105 menghasilkan format ...
Post a Comment
Read more

Kumpulan Gambar Jenis Jenis Batik Terbaru 2013

By Kiki Andrean
Kumpulan Gambar Jenis Jenis Batik Terbaru  -  Informasi Terbaru  - Jenis-Jenis Batik Nusantara 2013 - Setelah sebelumnya saya telah share informasi mengenai " Puisi Tentang Lingkungan " dan " Cerpen Lucu " kini saya akan update lagi blog tercinta ini dengan postingan mengenai  Kumpulan Gambar Jenis Jenis Batik Terbaru 2013  dan saya harap dapat bermanfaat untuk sahabat netter semua. Batik merupakan lukisan di atas kain yang digunakan sebagai bahan dasar pembuatan pakaian. Pada awalnya, batik hanya dikenal oleh kalangan keraton. Batik terdiri dari berbagai motif dan setiap motif merupakan simbol bagi pemakainya, seperti motif-motif parang dan kawung yang hanya boleh dikenakan oleh keluarga kerajaan. Pada perkembangannya, batik menyebar ke kalangan masyarakat umum.  Motif Batik Batik Tiga Negeri Batik Jawa Hokokai 1942-1945 Batik Buketan asal Pekalongan dengan desain pengaruh Eropa Batik Buketan Batik Lasem JENIS-JENIS BATIK Berdasarkan daerah asal Batik Ba...
Post a Comment
Read more