Riedayme Pengetahuan untuk Mempelajari Pemrograman khususnya pada Website, Mobile dan Desktop saya tuliskan disini.
Riedayme
Riedayme

Syntax Highlighter - Highlight.js

Syntax highlighter berfungsi untuk memperbagus tampilan kode dihalaman web. ada banyak cara membuat syntax highlighter diantaranya menggunakan highlight.js.

memilih highlight.js adalah pilihan yang bagus karena ringan dan tidak terlalu banyak javascript yang digunakan. selain itu highlight.js bisa otomatis mendeteksi tag pre dan code, jadi kalian tidak perlu mengeditnya satu persatu kode yang sebelumnya sudah ditulis karena highlight.js akan bekerja otomatis.

Menggunakan highlight.js

  1. buat file dengan nama hljs.html 
  2. kemudian isi kode dibawah ini
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
     
    </body>
    </html>
  3. tambahkan css highlight.js, taruh kode css diatas </head>
    <style>
    /* 
    * hljs monokai 
    * https://cdnjs.com/libraries/highlight.js/
    */
    .hljs-ln-numbers {-webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; text-align: center !important; color: #ccc !important; border-right: 1px solid #CCC !important; vertical-align: top !important; padding-right: 5px !important; /* your custom style here */ } /* for block of code */ .hljs-ln-code {padding-left: 10px !important; } .hljs {display: block; overflow-x: auto; padding: 0.5em; background: #272822; color: #ddd; } .hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, .hljs-name {color: #f92672; } .hljs-code {color: #66d9ef; } .hljs-class .hljs-title {color: white; } .hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link {color: #bf79db; } .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable {color: #a6e22e; } .hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {color: #75715e; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title, .hljs-section, .hljs-type, .hljs-selector-id {font-weight: bold; }
    
    </style>
  4. tambahkan js highlight.js, taruh kode js diatas </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script> 
    <script>
    //<![CDATA[
    
    /**
    * Highlight.js
    */
    document.addEventListener('DOMContentLoaded', (event) => {
    
     /* double click */
     for (var pres = document.querySelectorAll("pre,code,kbd,blockquote,td"), i = 0; i < pres.length; i++) pres[i].addEventListener("dblclick", function() {
         var e = getSelection(),
             t = document.createRange();
         t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
     }, !1);
    
        document.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightBlock(block);
        });
    });    
    
    //]]>    
    </script>
  5. kemudian tambahkan kode dummy untuk mencoba highlight.js, taruh kode dibawah <body>
    <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
     
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>

kemudian untuk melihat hasilnya, anda bisa membuka file hljs.html dibrowser.

Hasil live di codepen.io
0 Komentar
Web Plugins

Artikel Terkait

Komentar