Cara Membuat Pre SyntaxHighlighter

Cara Membuat Syntax Highlighter blogger blogspot
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 →


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...


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 ...

9 comments:

  1. yeah, higlighther yang sering dipakai webweb resource ="=
    tp saya make dari mas Taufik hehe, itung2 gak ada script SRC nya ckck :^D^:

    ReplyDelete
    Replies
    1. dari mas taufik bagus gan,, tapi saya pengen membedakan secara manual script dan css... kalau blog saya yang satu lagi baru pake script dari mas taufik... hehehehe :^D^:

      Delete
  2. wah-wah, bru bbrpa hri g' ksni dh d rombak lagi ni tmplatenya, hehehe . . . mkin kren aja ni blog :-bd

    ReplyDelete
    Replies
    1. hehe.. :) iya sob nich masih banyak yang harus di rombak.. terutama untuk halaman depan.. masih bingung musti pake tema apa,,,

      Delete
  3. Replies
    1. oiya mas kalo mau make dobel klik kaya mas taufik itu gimana ya mas :p

      Delete
  4. kalau pasang kotak kaya om gmna? :D

    ReplyDelete
  5. wah susah bener yah..
    kok gagal mulu saya :p

    ReplyDelete
  6. I have also liked the article and topic. Its a beautiful website for all tech people. I also Use this Get Likes
    to promote on Facebook Google, Twitter and LinkedIn. These days its good to share your posts to social networking sites.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top