Cara Memasang Syntax Highlighter dengan Prism di Blog



Pada kesempatan kali ini saya akan memberikan tutorial Cara Pemasangan Syntax Highlighter dengan Prism di Blog. Mungkin bagi websider atau blogger terutama Blog yang bertemakan tutorial Blogging,  sudah tidak asing lagi dengan  namanya Syntax Highlighter karena blog dengan teme tutorial blogging sudah pasti menggunakan ini di dalamnya selain blockquote, apapun itu jenisnya.


Penggertian Syntax Highlighter

Syntax highlighter adalah fitur editor teks yang digunakan untuk memproyeksikan berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

Baca juga: Cara Membuat Table Of Contents (TOC) Multi-level List Otomatis di Blog

Mengapa harus menggunakan Syntax Highlighter?

Menggunakan Syntax Highlighter pada web atau blog dengan teme tutorial sangat penting, karena dengan menggunakan featur editor ini, dapat membuat pengunjung lebih mudah membedakan mana yang merupakan kode CSS, HTML, atau Javascript dengan tulisan biasa serta disamping itu penyusunan markup di dalam postingan terlihat lebih rapih.

DEMO

Pemasangan Syntax Highlighter

Sudah tahukan fungsi dan manfaatnya di dalam blog? jika sobat sudah tahu fungsi dan manfaatnya mari kita lanjut pada cara penerapannya di dalam blog. Ups... lupa sebelum ke cara pamasangan pastikan dulu sobat sudah melihat link demonya di atas, jika belum cek terlebih dahulu agar nantinya sobat tidak salah dalam memilih untuk dipasang pada blog. Bagaimana tertarik? jika tertarik ikuti tutorialnya di bawah ini
  1. Seperti biasa pastikan sobat sudah berada di Dashboard Blogger
  2. Kemudian pilih Theme ⇒ EDIT HTML, namun sebelum itu alangkah baiknya template sobat di backup terlebih dahulu untuk menghindari terjadi kesalahan dalam penerapannya
  3. Simpan code CSS nya tepat di dalam code <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>
    pre {
      padding:.5em 1em;
      margin:.5em 0;
      white-space:pre;
      word-wrap:normal;
      overflow:auto;
      background-color:#1B2426;
    }
    
    code {
      font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
      line-height:16px;
      color:#B43D3D;
      background-color:#eee;
      border:1px solid #ddd;
      padding:1px 2px;
    }
    
    pre code {
      display:block;
      background:none;
      border:none;
      color:#B9BDB6;
      direction:ltr;
      text-align:left;
      word-spacing:normal;
      padding:0 0;
    }
    
    code .token.punctuation {
      color:#83405A;
    }
    
    pre code .token.punctuation {
      color:#B9BDB6;
    }
    
    code .token.comment,
    code .token.prolog,
    code .token.doctype,
    code .token.cdata {
      color:#435A4D;
    }
    
    code .namespace {
      opacity:.8;
    }
    
    code .token.property,
    code .token.tag,
    code .token.boolean,
    code .token.number {
      color:#5BA1CF;
    }
    
    code .token.selector,
    code .token.attr-name,
    code .token.string {
      color:#986A7C;
    }
    
    pre code .token.selector,
    pre code .token.attr-name,
    pre code .token.string {
      color:#E0E8FF;
    }
    
    code .token.entity,
    code .token.url,
    pre .language-css .token.string,
    pre .style .token.string {
      color:#E0E8FF;
    }
    
    code .token.operator {
      color:#878A85;
    }
    
    code .token.atrule,
    code .token.attr-value {
      color:#48D30F;
    }
    
    pre code .token.atrule,
    pre code .token.attr-value {
      color:#48E638;
    }
    
    code .token.keyword {
      color:#47A1CF;
      font-style:italic;
    }
    
    code .token.comment {
      font-style:italic;
    }
    
    code .token.regex {
      color:#B43D3D;
    }
    
    code .token.important {
      font-weight:bold;
    }
    
    code .token.entity {
      cursor:help;
    }

  4. Selanjutnya letakkan code JavaScript dibawah ini, tepat di atas code </head> atau tepat di atas code </body>
    <script>
    //<![CDATA[/**
     * Prism: Lightweight, robust, elegant syntax highlighting
     * MIT license http://www.opensource.org/licenses/mit-license.php/
     * @author Lea Verou http://lea.verou.me
     */
    !
    function () {
     var a = /\blang(?:uage)?-(?!\*)(\w+)\b/i,
     b = self.Prism = {
      languages: {
       insertBefore: function (a, c, d, e) {
        e = e || b.languages;
        var f = e[a],
        g = {};
        for (var h in f) if (f.hasOwnProperty(h)) {
         if (h == c) for (var i in d) d.hasOwnProperty(i) && (g[i] = d[i]);
         g[h] = f[h]
        }
        return e[a] = g
       },
       DFS: function (a, c) {
        for (var d in a) c.call(a, d, a[d]),
        "[object Object]" === Object.prototype.toString.call(a) && b.languages.DFS(a[d], c)
       }
      },
      highlightAll: function (a, c) {
       for (var f, d = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'), e = 0; f = d[e++];) b.highlightElement(f, a === !0, c)
      },
      highlightElement: function (d, e, f) {
       for (var g, h, i = d; i && !a.test(i.className);) i = i.parentNode;
       if (i && (g = (i.className.match(a) || [, ""])[1], h = b.languages[g]), h) {
        d.className = d.className.replace(a, "").replace(/\s+/g, " ") + " language-" + g,
        i = d.parentNode,
        /pre/i.test(i.nodeName) && (i.className = i.className.replace(a, "").replace(/\s+/g, " ") + " language-" + g);
        var j = d.textContent.trim();
        if (j) {
         j = j.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\u00a0/g, " ");
         var k = {
          element: d,
          language: g,
          grammar: h,
          code: j
         };
         if (b.hooks.run("before-highlight", k), e && self.Worker) {
          var l = new Worker(b.filename);
          l.onmessage = function (a) {
           k.highlightedCode = c.stringify(JSON.parse(a.data)),
           k.element.innerHTML = k.highlightedCode,
           f && f.call(k.element),
           b.hooks.run("after-highlight", k)
          },
          l.postMessage(JSON.stringify({
           language: k.language,
           code: k.code
          }))
         } else k.highlightedCode = b.highlight(k.code, k.grammar),
         k.element.innerHTML = k.highlightedCode,
         f && f.call(d),
         b.hooks.run("after-highlight", k)
        }
       }
      },
      highlight: function (a, d) {
       return c.stringify(b.tokenize(a, d))
      },
      tokenize: function (a, c) {
       var d = b.Token,
       e = [a],
       f = c.rest;
       if (f) {
        for (var g in f) c[g] = f[g];
        delete c.rest
       }
       a: for (var g in c) if (c.hasOwnProperty(g) && c[g]) {
        var h = c[g],
        i = h.inside,
        j = !!h.lookbehind || 0;
        h = h.pattern || h;
        for (var k = 0; k < e.length; k++) {
         var l = e[k];
         if (e.length > a.length) break a;
         if (! (l instanceof d)) {
          h.lastIndex = 0;
          var m = h.exec(l);
          if (m) {
           j && (j = m[1].length);
           var n = m.index - 1 + j,
           m = m[0].slice(j),
           o = m.length,
           p = n + o,
           q = l.slice(0, n + 1),
           r = l.slice(p + 1),
           s = [k, 1];
           q && s.push(q);
           var t = new d(g, i ? b.tokenize(m, i) : m);
           s.push(t),
           r && s.push(r),
           Array.prototype.splice.apply(e, s)
          }
         }
        }
       }
       return e
      },
      hooks: {
       all: {},
       add: function (a, c) {
        var d = b.hooks.all;
        d[a] = d[a] || [],
        d[a].push(c)
       },
       run: function (a, c) {
        var d = b.hooks.all[a];
        if (d && d.length) for (var f, e = 0; f = d[e++];) f(c)
       }
      }
     },
     c = b.Token = function (a, b) {
      this.type = a,
      this.content = b
     };
     if (c.stringify = function (a) {
      if ("string" == typeof a) return a;
      if ("[object Array]" == Object.prototype.toString.call(a)) {
       for (var d = 0; d < a.length; d++) a[d] = c.stringify(a[d]);
       return a.join("")
      }
      var e = {
       type: a.type,
       content: c.stringify(a.content),
       tag: "span",
       classes: ["token", a.type],
       attributes: {}
      };
      "comment" == e.type && (e.attributes.spellcheck = "true"),
      b.hooks.run("wrap", e);
      var f = "";
      for (var g in e.attributes) f += g + '="' + (e.attributes[g] || "") + '"';
      return "<" + e.tag + ' class="' + e.classes.join(" ") + '" ' + f + ">" + e.content + "</" + e.tag + ">"
     },
     !self.document) return void self.addEventListener("message", function (a) {
      var c = JSON.parse(a.data),
      d = c.language,
      e = c.code;
      self.postMessage(JSON.stringify(b.tokenize(e, b.languages[d]))),
      self.close()
     },
     !1);
     var d = document.getElementsByTagName("script");
     d = d[d.length - 1],
     d && (b.filename = d.src, document.addEventListener && !d.hasAttribute("data-manual") && document.addEventListener("DOMContentLoaded", b.highlightAll))
    } (),
    Prism.languages.markup = {
     comment: /&lt;!--[\w\W]*?--(&gt;|&gt;)/g,
     prolog: /&lt;\?.+?\?&gt;/,
     doctype: /&lt;!DOCTYPE.+?&gt;/,
     cdata: /&lt;!\[CDATA\[[\w\W]+?]]&gt;/i,
     tag: {
      pattern: /&lt;\/?[\w:-]+\s*[\w\W]*?&gt;/gi,
      inside: {
       tag: {
        pattern: /^&lt;\/?[\w:-]+/i,
        inside: {
         punctuation: /^&lt;\/?/,
         namespace: /^[\w-]+?:/
        }
       },
       "attr-value": {
        pattern: /=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,
        inside: {
         punctuation: /=/g
        }
       },
       punctuation: /\/?&gt;/g,
       "attr-name": {
        pattern: /[\w:-]+/g,
        inside: {
         namespace: /^[\w-]+?:/
        }
       }
      }
     },
     entity: /&amp;#?[\da-z]{1,8};/gi
    },
    Prism.hooks.add("wrap", function (a) {
     "entity" === a.type && (a.attributes.title = a.content.replace(/&amp;/, "&"))
    }),
    Prism.languages.css = {
     comment: /\/\*[\w\W]*?\*\//g,
     atrule: /@[\w-]+?(\s+.+)?(?=\s*{|\s*;)/gi,
     url: /url\((["']?).*?\1\)/gi,
     selector: /[^\{\}\s][^\{\}]*(?=\s*\{)/g,
     property: /(\b|\B)[a-z-]+(?=\s*:)/gi,
     string: /("|')(\\?.)*?\1/g,
     important: /\B!important\b/gi,
     ignore: /&(lt|gt|amp);/gi,
     punctuation: /[\{\};:]/g
    },
    Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", {
     style: {
      pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/gi,
      inside: {
       tag: {
        pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/gi,
        inside: Prism.languages.markup.tag.inside
       },
       rest: Prism.languages.css
      }
     }
    }),
    Prism.languages.javascript = {
     comment: {
      pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
      lookbehind: !0
     },
     string: /("|')(\\?.)*?\1/g,
     regex: {
      pattern: /(^|[^/])\ / ( ? !\ / )(\ [. + ?] | \\. | [ ^ /\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g, lookbehind: !0
     },
     keyword: /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g, "boolean": /\b(true|false)\b/g, number: /\b-?(0x)?\d*\.?\d+\b/g, operator: /[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\//g, ignore: /&(lt|gt|amp);/gi, punctuation: /[{}[\];(),.:]/g
    },
    Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", {
     script: {
      pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/gi,
      inside: {
       tag: {
        pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/gi,
        inside: Prism.languages.markup.tag.inside
       },
       rest: Prism.languages.javascript
      }
     }
    }),
    Prism.languages.java = {
     comment: {
      pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
      lookbehind: !0
     },
     string: /("|')(\\?.)*?\1/g,
     keyword: /\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,
     "boolean": /\b(true|false)\b/g,
     number: /\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,
     operator: {
      pattern: /([^\.]|^)([-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|%|\^|(&lt;){2}|($gt;){2,3}|:|~)/g,
      lookbehind: !0
     },
     ignore: /&(lt|gt|amp);/gi,
     punctuation: /[{}[\];(),.:]/g
    };
    //]]>
    </script>
    

    Simpan atau save

    JavaScript di atas sobat bisa hosting sendiri, saya rekomendasikan untuk penghostingan code atau apapun itu, gunakan Github karena server yang mereka miliki sudah teruji dan tingkat keamanannya sangat terjamin.

  5. Penerapan di dalam postingan, masukkan code pemanggilnya di bawah ini pada halaman CODE atau HTML postingan
    <pre><code class="language-markup"> ... kode HTML ... </code></pre>
    <pre><code class="language-css"> ... kode CSS ... </code></pre>
    <pre><code class="language-javascript"> ... kode JavaScript ... </code></pre>
    <pre><code class="language-java"> ... kode Java ... </code></pre>

Cara Pemakaian

Setiap tipe bahasa memiliki kelasnya masing-masing:
  • HTML, XML, PHPlanguage-markup
  • CSSlanguage-css
  • JavaScriptlanguage-javascript
  • Javalanguage-java

Sebelum muncul pertanyaan, Syntax Highlighter jenis apa yang digunakan pada blog infonetmu.com, kok beda? maka akan saya jawab, yang digunakan pada blog infonetmu.com adalah Syntax yang sama  tetapi saya sudah memodifikasihnya agar terlihat lebih berbeda dengan tampilan pada umunya.

So, jika sobat menggunakan Syntax Highlighter di atas agar terlihat berbeda dengan yang lainnya, silahkan sobat modifikasi sesuai dengan selera masing-masing. Sekian tutorial tentang Cara Memasang Syntax Highlighter dengan Prism di Blog, jika ada kekurangan atau kesalahan yang saya jabarkan di atas mohon beritahukan melalui kolom komentar yang telah di sediakan di bawah, terima kasih. Salam Blogger Nusantara!!!

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments