Membuat Syntax Highlighter support Line Number Simple dan Mudah

Syntax Highlighter akan sangat diperlukan bagi webmaster yang membagikan konten tutorial code, ada banyak sekali pilihan yang bisa kita temukan di mesin pencari google, namun yang benar-benar sesuai dengan pilihan kita terkadang akan sangat sulit mencarinya.

Kali ini kami menemukan yang cocok buat kami, dan dengan senang hati kami bagikan pada Anda. Untuk demo bisa dilihat dari tampilan posting ini, karena ini juga script yang kami pakei. Langsung saja hahaha .....

Jika kurang jelas tentang apa yang kami sampaikan, Anda bisa langsung cek sumbernya di https://github.com/google/code-prettify.

Cara menggunakan syntax highlight google ini

1. Pasang script dibawah sebelum kode </head>.
   

   <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
   // rawgit telah mematikan service namun saat update post ini masih berjalan dengan baik, gunakan alternatif dibawah
   <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>



2. Tema pilihan kami adalah CSS berikut, pasang dalam cakupan <style>.
   

   /* Syntax Highlighter */
   .str{color:#EC7600}
   .kwd{color:#93C763}
   .com{color:#66747B}
   .typ{color:#678CB1}
   .lit{color:#FACD22}
   .pun{color:#F1F2F3}
   .pln{color:#F1F2F3}
   .tag{color:#8AC763}
   .atn{color:#E0E2E4}
   .atv{color:#EC7600}
   .dec{color:purple}
   pre.prettyprint{border:0 solid #888;padding:10px;white-space:pre-wrap;font-size:inherit;}
   ol.linenums{margin-top:0;margin-bottom:0;margin-left:1.5em;}
   .prettyprint{background:#000}
   li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}
   li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}
   @media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}



3. Cara penulisan di Posting gunakan html mode ditulis dalam markup <pre> seperti contoh berikut.
   

   <pre class='prettyprint lang-html linenums'><code>
   HTML code here
   </code></pre>
   
   <pre class='prettyprint lang-js linenums'><code>
   JavaScript code here
   </code></pre>
   
   <pre class='prettyprint lang-css linenums'><code>
   CSS code here
   </code></pre>
   



4. Jangan lupa untuk memparse kode yang dipasang dalam cakupan <pre> 
   • Konversi & menjadi &amp;
   • Konversi ' menjadi &#039;
   • Konversi " menjadi &quot;
   • Konversi < menjadi &lt;
   • Konversi > menjadi &gt;
   • Parse code disini


5. Contoh yang sudah di parse seperti berikut

   <pre class='prettyprint lang-js linenums'><code>function syntaxHighlight(json) {
       if (typeof json != &#039;string&#039;) {
            json = JSON.stringify(json, undefined, 2);
       }
       json = json.replace(/&amp;/g, &#039;&amp;&#039;).replace(/&lt;/g, &#039;&lt;&#039;).replace(/&gt;/g, &#039;&gt;&#039;);
       return json.replace(/(&quot;(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\&quot;])*&quot;(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
           var cls = &#039;number&#039;;
           if (/^&quot;/.test(match)) {
               if (/:$/.test(match)) {
                   cls = &#039;key&#039;;
               } else {
                   cls = &#039;string&#039;;
               }
           } else if (/true|false/.test(match)) {
               cls = &#039;boolean&#039;;
           } else if (/null/.test(match)) {
               cls = &#039;null&#039;;
           }
           return &#039;&lt;span class=&quot;&#039; + cls + &#039;&quot;&gt;&#039; + match + &#039;&lt;/span&gt;&#039;;
       });
   }</code></pre>
   

Sangat mudah kan ...