Memasang Syntax Highlighter Di Blogger

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 ! 

Artikel By FoXDamn Blog's
Kalian sedang membaca : Memasang Syntax Highlighter Di Blogger dan Artikel Memasang Syntax Highlighter Di Blogger dengan link/URL https://foxdamn.blogspot.com/2015/12/memasang-syntax-highlighter-di-blogger.html, kalian bisa share atau membagikan jika merasa Artikel Memasang Syntax Highlighter Di Blogger ini bermanfaat bagi Kalian ataupun teman-teman Kalian, tetapi jangan lupa menyertakan Memasang Syntax Highlighter Di Blogger sebagai sumbernya.
Thanks . By FoXDamn Blog's

Author : FoXDamn Blog's

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

Share this

Related Posts