Kategori Random

Menggabungkan SyntaxHighlighter dengan PHP+HTML

Posted : 20 Januari 2012 | 04:08:00 , Dibaca 1930 kali

Pernahkan anda memperhatikan sebuah laman yang berisi code tutoral php, css, atau pun yang lain, jika kita perhatikan code yang ditampilkan begitu rapi dan tersusun baik. Usut punya usut setelah seach sana sini ternyata itu adalah Syntax highlighting. Jadi Syntax highlighting adalah sebuah tools plugin yang disediakan oleh developer untuk mempermudah kita dalam penampilan code source di tampilan website. Pada tutorial ini saya akan bahas tentang salah satu dari sekian banyak contoh Syntax highlighting yaitu Syntaxhighlighter.

SyntaxHighlighter adalah fitur dari beberapa teks editor yang menampilkan teks -terutama source code dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memudahkan penulisan dalam bahasa pemrograman atau bahasa markup secara terstruktur.

Ide dibalik pembuatan Syntax Highlighter adalah untuk memungkinkan penyisipan potongan kode berwarna pada halaman web tanpa bergantung pada sisi script server. Syntax Highlighter menggunakan bahasa reguler untuk melakukan parse terhadap text.

Fitur SyntaxHighlighter

  1. Mendukung beberapa format bahasa
  2. Support terhadap semua media browser seperti : Google Chrome, Mozilla FireFox, Internet Explorer, Opera dan lainnya.
  3. Mudah untuk digunakan dan dikembangkan.
  4. 100% untuk pengguna tanpa adanya campur tangan server
  5. Sangat ringan

Support Bahasa SyntaxHighlighter

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

 

contoh penggunaannya sebagai berikut : implementasi pada css

/**
  * SyntaxHighlighter
 **/
#headernya{  height:100px; margin:0px;}
#headerisi{ height:100px; width:940px; color:#fff; margin:0 auto;}
#logo{ width:215px; background:url(../../view/image/logos.png); height:100px; float:left;}
#div-wrap-isi-menu{ height:50px; color:#ccc; float:left; margin-top:30px;}

Contoh penggunaan pada code php

<?php
//implementasi pada code php
//SyntaxHighlighter

$variabel1 = "Aku";
$variabel2 = "Saya";

echo" $variabel1 . $variabel2";
?>

Penggunaan SyntaxHighlighter dapat mempercantik tampilan website agar kode-kode html lebih rapi dan menarik. Bagaimana tertarik menggunakan di laman anda silakan kunjungi laman syntaxhighlighter di http://alexgorbatchev.com/SyntaxHighlighter/

Bagaimana penggunaannya diwebsite?

Kita akan membahasnya di artikel selanjutnya :D

Postingan Terkait
» Membuat Text Slider Testimonial dengan JQuery Cycle Plugin ( 10 Mar 2015 | 16:06:41 , 2976 hits )
» Sorter Data Tabel MySQL berdasarkan judul dengan JQuery Table.Sorter ( 23 Feb 2015 | 09:42:55 , 3770 hits )
» Memasang JQuery Isotope pada tampilan portofolio item ( 30 Jan 2015 | 19:24:28 , 1853 hits )
» Membuat SyntaxHighlighter pada website ( 30 Jan 2015 | 04:28:10 , 1450 hits )
» HTML5 ( 20 Jan 2012 | 04:08:00 , 1618 hits )