Categories: Template Hack

Cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js

Berikut adalah cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js. Adalah bagian dasar dan semoga bermanfaat dan dapat dikembangkan lagi.

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Gunanya, untuk 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.

Untuk mengaktifkan fitur ini dibutuhkan javascript yang dapat ditempatkan pada code HTML Template Blog. Pada postingan kali ini, saya ingin share cara membuat syntaxhighlighter, menggunakan Highlight.js dari Softwaremaniacs.

Caranya: copy dulu kode javascript di bawah ini atau lebih aman download disini.

Langkah 1 : Menyimpan JavaScript

Simpan JavaScript ini di atas </head> dalam tamplate blog.

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>    <script>      hljs.initHighlightingOnLoad();    </script>

Langkah 2 : Pilih CSS

Code CSS dalam hal ini, berfungsi menampilkan style SyntaxHighlighter dimaksud.  

Related Post

Ada banyak pilihan CSS yang bisa digunakan, sebelum anda memilih, terlebih dahulu dapat melihat-lihat demo DISINI.

Untuk Pilihan CSS, anda bisa download DISINI.

Atau salah satu contoh Default CSS SyntaxHighlighter:

/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
  color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
  color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
  color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
  color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
  color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
  font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
  font-style: italic;
}
pre .nginx .built_in {
  font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
 

Langkah 3 : Simpan CSS tersebut di atas ]]></b:skin>

Langkah 4 : Cara Penggunaan

Untuk menggunakan Highlight.js ini, sangat simple, kita tidak perlu menentukan bahasanya, anda tinggal tulis seperti ini :

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

FAQs

Apa itu SyntaxHighlighter?

SyntaxHighlighter adalah kode mandiri sintaks yang berfungsi penuh yang dikembangkan dalam JavaScript. Untuk mendapatkan gambaran tentang kemampuan SyntaxHighlighter, lihat halaman kami. SyntaxHighlighter saat ini digunakan oleh Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks, dan lainnya.

Apa gunanya Syntax Highlighting?

Syntax Highlighting adalah fitur editor teks yang digunakan untuk pemrograman, scripting, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah.

Demikian cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js. Happy blogging..

Staff DC
Share
Tags: Blogger

Recent Posts

What is Scatters Casino

If you are a slot enthusiast, the word 'scatters' will surely ring a bell in…

2 weeks ago

What is Lightning Dice Live Game

Evolution Gaming is continuing their success by released Lightning Dice live game. Lightning Dice is…

3 weeks ago

Betcity Casino Online Review [3 Top Complete Explanations]

You can place sports bets as well as play online and live casino games at…

3 weeks ago

6 Useful Roulette Casino Strategy That Makes You Become A Professional

Roulette is, after all, a game of chance. However, there are a few useful roulette…

4 weeks ago

3 Essential Reviews of Pirates Charm Slot: Win Big with Charms

With the Pirates Charm slot from Quickspin it can go both ways: hard up or…

4 weeks ago

How to Pick Slot Machines With The Best Odds of Winnings

Are you trying to find out how to boost your odds of winning at slots…

1 month ago

This website uses cookies.