Add Syntax Highlighter with Eclipse Orion Style Editor to The Blog

Satu topic pembicaraan yang memang banyak di bahas yaitu syntax highlighter Lama malang melintang di dunia syntaxhighlighter mungkin karya Alex Gorbatchev. Dalam memilih fitur SyntaxHighlight lebih bijak disesuaikan dengan kebutuhan. Karena satu yg AA Koben cermati, si Syntax-Highlighter tidak lain bertujuan untuk membuat lebih jelas dan mudah di baca dalam penulisan sebuah bahasa. Mau bahasa, javascript, HTML, CSS, PHP, Applet, or etc. Seorang scripter yang sudah menguasai salah satu bahasa program, pasti bakalan familiar dengan tulisan² yg berwarna-warni pada fitur syntax highlighter.

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.Alex Gorbatchev

Dari sekian banyak tawaran, gue memilih yg aneh bin unik (script sedikit) ;) Open this address thecodeplayer.com/walkthrough/mysql-syntax-highlighter-javascript-regex Penulisan syntax yg cukup unik perpaduan antara tagging pre and textarea Silahkan di pelajari. Bagi blogger yg mana konten blognya banyak bermain dengan penulisan koding, keberadaan syntax_highlight memang patut di pasangkan! Sederhana dan mudah dalam pemakaian dan lumayan banyak di pakai adalah google code prettify. Silahkan baca artikel berikut net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project

Saya punya satu tawaran lain nih, dan jarang yg memakainya :D Pernah mendengar Eclipse Orion Editor?

Langkah 1.
Tambahkan bumbu berikut di suatu tempat di bagian head untuk file css & script.

<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/3.0/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/3.0/built-editor.min.js"></script>
<script>
 require(["orion/editor/edit"], function(edit) {
  edit({className: "editor"});
 });
</script>

Langkah 2
Penulisan markup HTML eclipse orion

<pre class="editor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>

Langkah-langkah di atas file menggunakan hostingan dari web elipse.ord Read here planetorion.org/news/2013/02/embed-the-latest-orion-editor-in-your-code-in-2-steps Kalau sobat mau hostingkan sendiri bumbu² yg ada, ada baiknya diedit-edit terlebih dahulu sesuai keperluan ;) Koben sudah buatkan satu bundel bumbu highlighter orion buat kalian.www.4shared.com/zip/1F4TcdgZ/Eclipse_Orion_Editor.htmlFile orion-editor.css perampingan dari kode CSS bawaan, kalian bisa edit² lagi! Javascript sudah compress mode. Silahkan jika berminat memasangkannya di blog anda. Semoga bermanfaat :)
Links help resource:
www.eclipse.org/orion
wiki.eclipse.org/Orion/How_Tos/Editor_Build
wiki.eclipse.org/Orion/Documentation/Developer_Guide/Plugging_into_the_editor
orionhub.org/examples/editor/minimaleditor.html
github.com/eclipse/orion.client
Happy highlighter \m/