Cara Membuat Pre SyntaxHighlighter

Tutorial Syntax For Blogger

SyntaxHighlighter ®

How to Use Pre SyntaxHighlighter ...???
Bagaimana Cara Membuat Pre SyntaxHighlighter ® atau SyntaxHighlighting pada blog, Blogger Blogspot dan Wordpress ... ???

UNDER-88 →
SyntaxHighlighter ® atau SyntaxHighlighting sering kita lihat pada sebuah artikel atau postingan yang menuliskan code source seperti javascript,HTML,CSS dan Text yang secara otomatis memiliki warna tertentu pada setiap kata. bagi orang awam atau blog pemula akan berfikir. apa itu di warnai satu persatu. tidak mungkin kan ... kalau hanya 1 kalimat saja itu mungkin.. tapi bagaimana jika berupa javascript,HTML,CSS .. rumit kalau di warnai satu persatu..
inilah yang akan saya bahas pada postingan kali ini.

UNDER-88 →Bagaimana SyntaxHighlighter® atau Syntax Highlighting berfungsi..??.

Ya tentu saja pada sebuah code khusus yang sudah kita atur sedemikian rupa. SyntaxHighlighter® atau SyntaxHighlighting hampir sama kegunaanya dengan <mark>...</mark>. tidak lain adalah pewarnaan pada sebuak paragraf,kalimat atau kata secara otomatis.


UNDER-88 → Terus seperti apa SyntaxHighlighter® atau SyntaxHighlighting itu ..??

seperti namanya highlighter adalah pencahayaan... jadi jika sebuah code yang di beri highlighter akan memberikan kesan mencolok dari code lain.

Contoh pada <mark>...</mark> :

KANK DENZDII GANTENG

warna tersebut akan otomatis terpasang jika kita menggunakan code ini <mark>KANK DENZDII GANTENG</mark>

Contoh Syntax Highlighter atau Syntax Highlighting :

Contoh Jika berupa HTML lang-html :

<nav>
      <img width="12" height="25" alt="HTML5 Navbar" src="img/star-top.png"/>
      <h2 id="navhdr">NAV</h2>
      <ul id="navmenu">
        <li><a tabindex="1" href="#the-logo">An HTML5 Logo</a></li>
        <li><a tabindex="2" href="#the-technology">The Technology</a></li>
        <li><a tabindex="3" href="#the-movement">The Movement</a></li>
        <li><a tabindex="4" href="#downloads">Downloads</a></li>
        <li><a tabindex="5" href="#swag">Stuff!</a></li>
        <li><a tabindex="6" href="faq.html">FAQ</a></li>
        <li><a tabindex="7" href="#top">Back Up Top</a></li>
      </ul>
      <img width="12" height="29" alt="HTML5 Navbar" src="img/star-bottom.png" class="star"/>
    </nav>

Contoh Jika berupa Javascript lang-js :

var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': maxThreadDepth
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

Contoh Jika berupa CSS lang-css :

/* logo */
#logo {
 position:absolute;
 top:25px;
 left:5px;width:400px;
}
#logo h1 {color:#FFF;}
#logo a {color:#FFF;}
#logo a:hover {color:#FFF;text-decoration:none;}

#logo .description {
 font-size:16px;
}

Contoh Jika berupa TEXT lang-tex :

Kang Denzdii Ganteng Sedunia.
Dan selalu Ganteng Selamanya.
Tidak Ada Orang Lain Yang Lebih Ganteng Darinya.
Kang Denzdii Ganteng Sedunia.
Dan selalu Ganteng Selamanya.
Tidak Ada Orang Lain Yang Lebih Ganteng Darinya.

Contoh di atas adalah MARK dan Syntax Highlighter atau Syntax Highlighting pada template saya. Karena Warna style sudah saya rubah. jika anda memasangnya. maka warna tulisan atau code bisa anda rubah sesuai keinginan..



UNDER-88 → Terus Bagaimana Jika Saya Ingin Memasang Syntax Highlighter atau Syntax Highlighting Pada Template Saya .. ???

sekarang saatnya saya memberikan cara pemasangan dan cara penggunaanya pada postingan. simak saja :
Syntax Highlighter atau Syntax Highlighting yang saya berikan di ambil dari Google-Code-Prettify .

pertama download dulu codenya disini →

DOWNLOAD SYNTAX

Jika Sudah Lihat cara pemasangannya atau jika kalian malas download kalian bisa menggunakan Srcipt dan CSS Syntax Highlighter atau Syntax Highlighting seperti contoh di atas tadi :

CARA PEMASANGANNYA

1. Copas Script di Bawah dan Letakan di atas code </head>

<link href='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/prettify-1-Jun-2011/google-code-prettify/styles/desert.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/pretty.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/prettify-1-Jun-2011/google-code-prettify/src/lang-css.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/prettify-1-Jun-2011/google-code-prettify/src/lang-tex.js' type='text/javascript'/>

sebenarnya dengan hanya memasang script di bawaha ini :

<link href='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/prettify-1-Jun-2011/google-code-prettify/styles/desert.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/pretty.js' type='text/javascript'/>

Syntax Highlighter atau Syntax Highlighting sudah bisa berfungsi.

jika sudah di pasang sekarang cari kode <body> agar lebih cepat gunakan CTRL+F pada keyboard anda.
jika sudah ketemu sekarang masukan code di bawah dan tempatkan di dalam code <body> tersebut ..

onload='prettyPrint()'

cara Penampatannya seperti contoh di bawah :

<body onload='prettyPrint()'>

hanya segitu saja script yang di butuhkan pada HTML ...

Terus Bagaimana Cara Menggunakannya Pada Artikel atau postingan..??

pada saat kalian menuliskan artikel baru yang berupa code HTML,Javasript,Atau CSS.

kalian hanya mengunakan code berikut...

<pre class="prettyprint">
DI SINI TEMPAT ANDA MENULIS CODE YANG AKAN DI BERI Syntax Highlighter atau Syntax Highlighting
</pre>

atau bisa juga dengan ini

<code class="prettyprint">...</code>

Nah Agar warna tersebut Tidak sama dengan code lain kalian atau cara membedakan mana HTML,Javasript,Atau CSS hanya menambahkan seperti ini

1. untuk html :

<pre class="prettyprint lang-html">...</pre>

2. untuk CSS :

<pre class="prettyprint lang-css">...</pre>

3. untuk Javasript :

<pre class="prettyprint lang-js">...</pre>

4. untuk TEXT :

<pre class="prettyprint lang-tex">...</pre>

Untuk Tema Background,dan Code Warna anda bisa downloadnya di sini...

DOWNLOAD THEME

dan ganti script di bawah dengan hasil download tadi

<link href='http://dl.dropbox.com/u/66187775/javascript/pre-js-link/prettify-1-Jun-2011/google-code-prettify/styles/desert.css' rel='stylesheet' type='text/css'/>

Selesai sudah postingan cara membuat SyntaxHighlighter® atau SyntaxHighlighting ini. semoga bermanfaat . dan jika ada kesalahan dalam penulisan atau code tidak berjalan saya mohon maaf untuk kekurangannya anda bisa tinggalkan komentar jika ada yang masih di tanyakan atau bisa menambahkan kritik dan sarannya ..terima kasih atas kunjungannya.

UNDER-88 → Jangan Aasal COPAS postingan ini jika ingin menyimpannya pada artikel anda silahkan saja, asal tulis sumbernya.. saya harap anda mengerti kebijakan dan privasi blogger .

happy blogging ...