Kategori Random

Membuat SyntaxHighlighter pada website

Posted : 30 Januari 2015 | 04:28:10 , Dibaca 1249 kali

Pada artikel kali saya akan membuat penerapan SyntaxHighlighter pada website jika belum jelas tentang syntaxhighlighter bisa dibaca di artikel sebelumnya : Menggabungkan SyntaxHighlighter dengan PHP+HTML disitu sudah dijelaskan bahwa bahasa apa saja didukung oleh syntaxhighlighter.

Gambar tampilan hasil implementasi syntaxhighlighter di website

Untuk memulainya kita perlu mendapatkan code source nya bisa diambil di lamannya yaitu http://alexgorbatchev.com/SyntaxHighlighter/download versi rilis terakhir syntaxhighlighter yang saya gunakan adalah syntaxhighlighter_3.0.83. Setelah kita download kita extract dan kita tempatkan dalam satu folder dengan project web yang akan kita buat.

Pada folder extrac an kita terdapat beberapa folder tapi yang kita butuhkan cukup folder scripts dan folder styles saja.

Untuk menyisipkan code dalam syntaxhighlighter code standarnya adalah :

<pre class="brush: xxxxx;">

isi code source

</pre>

 

Kemudian setelah itu buat kan sebuah file baru extension .html buat saja namanya index.html dan masukkan code berikut :

<!DOCTYPE html>
<html>
<head>
	<title>Penggunaan SyntaxHighlighter</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
	<link type="text/css" rel="stylesheet" href="styles/style.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>

<body style="background: white; font-family: Helvetica">
<header>
<h1>Penggunaan SyntaxHighlighter</h1>
<h4>by Faber Nainggolan</h4>
</header>
<article>
<h3>Penggunaan pada code javascript</h3>
<pre class="brush: js;">
function SyntaxHighlighter()
{
	return "hi!";
}
</pre>

<h3>Penggunaan pada code php</h3>
<pre class="brush: php;">
<?php
  echo"Selamat datang di tutorial highlighter";
?>
</pre>

 <h3>Penggunaan pada code sql </h3>
<pre class="brush: sql;">
SELECT * FROM table WHERE field1='brush' and field2='action';
</pre>

 <h3>Penggunaan pada code html </h3>
<pre class="brush: html;">
<!DOCTYPE html>

<html>

<head>
  <title>Hello!</title>
</head>

<body>

<h2>Selamat datang di laman ini</h2>
<p>Senang rasa bisa membuat artikel ini</p>
</body>
</html>
</pre>

</article>
<footer>
 By <a href="http://fabernainggolan.net">Faber Nainggolan </a>
</footer>
</body>
</html>

Penjelasan baris code diatas adalah

- Baris 5-11 adalah code include script javascript yang kita ambil dari folder scripts dan folder styles, pada contoh code saya hanya mengimplementasikannya pada 4 code jadi ke script js nya yang saya includekan di head, jika ingin menambah yang lain bisa ditambahkan.

- Baris 12 adalah style css templatenya ini saya buat sendiri agar tampilan lebih cantik seperti pada gambar diatas.

- baris 13 merupakan code script untuk method memanggil javascript syntaxhighlighter

- baris 22-58 adalah contoh penulisan code nya

Bagaimana cukup mudah bukan, demikian artikel ini semoga bermanfaat.

Download Code Source

Postingan Terkait
» Membuat Text Slider Testimonial dengan JQuery Cycle Plugin ( 10 Mar 2015 | 16:06:41 , 2612 hits )
» Sorter Data Tabel MySQL berdasarkan judul dengan JQuery Table.Sorter ( 23 Feb 2015 | 09:42:55 , 3408 hits )
» Memasang JQuery Isotope pada tampilan portofolio item ( 30 Jan 2015 | 19:24:28 , 1588 hits )
» HTML5 ( 20 Jan 2012 | 04:08:00 , 1438 hits )
» jQuery Mobile ( 20 Jan 2012 | 04:08:00 , 1765 hits )