Memasang Syntax Highlighter Di Blogger

Memasang Syntax Highlighter Di Blogger

23.02
Syntax Highlighter

Hello gaes, berjumpa lagi di Artikel FoXDamn Blog's. Kali ini kita akan membahas tentang Syntax Highlighter .

Wow... apa itu Syntax Highlighter ? 

Apa itu Syntax Highlighter ?

Syntax Highlighter adalah sebuah fasilitas lintas platform untuk memberi perbedaan warna syntax pada code yang kita posting pada  artikel. Script nya dibuat oleh Alex Gorbatchev 

Fungsi Syntax Highlighter :

Secara pemahaman seringkali kita lihat beberapa artikel yang menyertakan code / script PHP ,  HTML , CSS , Javascript dll dan untuk memberi perbedaan warna pada syntax-syntax code itu kita menggunakan Syntax Highlighter ini.

Kadang juga kita melihat ada yang membagikan code-code tersebut dalam kotak blockquote, tetapi kita disini akan membuat itu tergantikan dengan bantuan script dari Syntax Highlighter ini. Lebih keren dan mudah dalam pemahaman script code yang kita bagikan nantinya pada artikel-artikel kita.

Contoh :

<?php

// Contoh Penggunaan Syntax Highlighter
echo "ini contoh";
echo "</br>";
echo "http://foxdamn.blogspot.com";

?>


Langkah pemasangan Syntax Highlighter pada blogger :

1. Buka dulu control / dashboard Blogger kalian. 

2. Lalu masuk menu Edit Template.

3. Carilah code ]]></b:skin> 
( ctrl + F dan masukkan ke dalam kotak pencarian tadi ]]></b:skin> , tekan tombol Enter )

4. Copy code dibawah ini tepat dibawah ]]></b:skin> 
untuk mengcopy dekatkan mouse kalian didekat code dibawah ini, lalu pojok kanan ada tombol klik View Source .

Code :

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

5. Simpan Template kalian.

Yup instalasi Syntax Highlighter sudah selesai. Masing-masing script brush di atas berfungsi untuk menerjemahkan script dan memberi style (warna) pada berbagai jenis script/kode seperti HTML, JS, CSS, PHP, Perl, Phyton, Ruby, XML, Java dll. Jika tidak membutuhkan penerjemah hapus saja classnya.

Pemasangan Pada Artikel :

 Penting :

 Dalam penggunaan di Artikel menggunakan tag <pre> Code </pre>

 
<pre class="brush:html">
Kode / Script
</pre>

diatas adalah contoh penggunaan untuk code brush HTML. bisa kalian kembangkan ke script HTML, JS, CSS, PHP, Perl, Phyton, Ruby, XML, Java dll. Tinggal kalian edit di bagian class="brush:html , brush:php ," dsb.

Langkah :
1. Dalam penulisan artikel masuk dari Compose ke mode HTML
2. Masukkan code diantara tag <pre> ..... </pre>  seperti contoh diatas.
3. PENTING ! Sebelum memasukkan code, kalian harus mem-PARSE code itu terlebih dahulu. Gunakan HTML PARSER di SINI.

Contoh HTML brush :
<pre class="brush:html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Memasang Syntax Highlighter &lt;title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Memasang Syntax Highlighter&lt;/h1&gt;
&lt;br&gt;
FoXDamn.Blogspot.com
&lt;/body&gt;
&lt;/html&gt;
</pre>
4. Hasilnya akan seperti ini :

<html>
<head>
<title> Memasang Syntax Highlighter <title>
</head>
<body>
<h1>Memasang Syntax Highlighter</h1>
<br>
FoXDamn.Blogspot.com
</body>
</html>

5. Kalian bisa kembali ke mode Compose untuk menambahkan tulisan.

6. Selesai,

Script Syntax Highlighter ini akan diload paling akhir setelah halaman artikel  dibuka.

Yeaaah. itu tadi cara memasang Syntax Highlighter  di blogger. Biar code-code yang kamu bagikan lebih berwarna. Eiits.. jangan lupa juga menerjemahkan code-code khusus nya wanita biar hidup kamu juga berwarna. wkwkwk 

 Sampai jumpa lagi di artikel selanjutnya.

 Seeeyaaaaa ! 

FoXDamn Blog's

Everything Just Need a Bullseeds.
Berbagi Macam Hal Informative dan Spesific.

Share this

More

Related Posts

2 komentar

komentar
FoXDamn Blog's
5 Desember 2015 pukul 23.03 delete

Memasang Syntax Highlighter di Blogger

http://foxdamn.blogspot.com/2015/12/memasang-syntax-highlighter-di-blogger.html

Reply
avatar

Catatan:
1. Berkomentarlah dengan sopan sesuai topik yang relevan dan tidak melakukan SPAM
2. Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>
3. Untuk memasukan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DISINI</i>

NB: Sebelum memasukkan kode silahkan parse terlebih dahulu dengan menggunakan tool konversi kode DISINI.

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
$-)
(y)
(f)
x-)
(k)
(h)
cheer
Langganan: Posting Komentar (Atom)