Cara Membuat Syntax Highlight - Kali ini kita saya akan Share Cara Membuat Syntax Highlight yang berfungsi Sebagai Kolom kode dalam tutorial seperti yang digunakan pada website atau blog tutorial .
Memang sudah banyak situs atau blog yang membahas tentang cara memasang dan menggunakan syntax highlighter serta berbagi code dan cara memasang syntax highlighter pada blog dan website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainya,tapi disini saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).

HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code saja, yang paling sering digunakan oleh para blogger (dalam membuat tutorial pada blog-nya) kebanyakan para blogger hanya untuk menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML.

Sebelum kita membuatnya , kita kenali dulu pengertian apa itu Syntax Highlight


PENGERTIAN SYNTAX HIGHLIGHT


Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).
Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.


CARA INSTAL SYNTAX HIGHLIGHTER


Untuk menginstal Sntax Highlighter pada blog , langkah pertama yang harus dilakukan adalah dengan meletakkan script dibawah ini tepat diatas </head> atau bisa juga sebelum kode </body>

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Langkah selanjutnya adalah memasang Css untuk mengatur Style dari Syntax Highlighter nya .


CSS SYNTAX HIGHLIGHT



/*
Pojoaque Style by Jason Tate
Based on Solarized Style from http://ethanschoonover.com/solarized
*/
pre code {
display: block; padding: 0.5em;
color: #DCCF8F;
background: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

Simpan Template .

Untuk menggunakan Syntax Highlight pada saat menulis posting , kita hanya perlu menambahkan tag <pre> dan <code> seperti dibawah ini

<pre><code>
Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
disini......
</code></pre>
Selesai .

Ada banyak style Syntax Highlight yang bisa anda gunakan untuk tampilan kode yang sempurna . Dan anda bisa melihatnya disini . Atau di Halaman Syntax Highlight Collection For Blogger .

Dan sampai disini dulu Artikel Cara Membuat Syntax Highlight kali ini dan semoga bermanfaat .


8 comments

avatar
29 June 2014 at 14:08

kala PHP gmna tuh gan ??

Reply
avatar
2 July 2014 at 05:38

Di search di gugel mungkin gan

Reply
avatar
1 November 2014 at 23:00

ini untuk menampilkan css or html ya gan? kalo untuk bahasa yang lain gimana.?

Reply
avatar
26 February 2015 at 13:43

Semua bisa dimasukin sinii dan bukan cuma Css dan HTML aja gan , silahkan pelajari lebih lanjut mengenai Syntax Highlighter

Reply
avatar
6 July 2015 at 01:36

ijin copy bagian css nya gan, salam kenal...

Reply
avatar
18 September 2015 at 01:20

Silahkan , dan salam kenal balik

Reply
avatar
14 April 2016 at 21:14

makasih mas, tutorialnya meudah bnget dipahami

Reply
avatar
10 May 2016 at 14:52

Sama sama mas ...

Reply

Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih