Cara Menggunakan Syntax Highlighter Pada Blog

Prisma Try Laksana

Blogspot

26 Oktober 2015

Belum ada komentar

Syntax Highlighter yaitu salah satu metode yang digunakan untuk membedakan antara tulisan biasa dan kode-kode yang ditulis dalam postingan. Lebih mudahnya Syntax Highlighter ini bisa diartikan sebagai untuk membuat kode berwarna-warni.

Ada banyak sekali style yang bisa digunakan dalam penulisan kode, hal ini bergantung dari masing-masing kode CSS yang digunakan. Nah, keuntungan menggunakan syntax highlighter adalah kita bisa dengan mudah memasang kode-kode di dalam postingan dengan tampilan yang berbeda dan khas.

Cara Menggunakan Syntax Highlighter Pada Blog:

1. Login akun blogger Anda.
2. Lalu pilih Theme > Edit HTML
3. Salin kode di bawah ini dan tempel di atas kode </head>
   

   <script src='https://cdn.jsdelivr.net/gh/NegeriMakmur/js@master/syntax-highlighter.js'></script>
   <script>hljs.initHighlightingOnLoad();</script>

4. Salin CSS di bawah ini dan tempel di atas kode </style>

   pre, i[rel="pre"] {padding:.8em 1em; margin:0; background-color:#2f3741; border-left:4px solid #40627E; font-size:11px; color:#839496; font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; line-height:1.4em; position:relative; white-space:pre; word-wrap:normal; overflow:auto;}
   pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ciRTBV7KjuV4WeK1MnV23JfzCsyhGxOos-QAmZfBbCGeNRSwyWg6xP7Q7cgoVx7KHQViSyONozJQfia7oERkglCqda721FDWJFUk-DgCqe2MRatA8qgFq6cYoM045SQmRjqFTQWN-d8/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none;}
   pre.line-number:after {content:""; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute;}
   pre[data-codetype="CSS"] {border-left-color:#5fbbba;}
   pre[data-codetype="HTML"] {border-left-color:#4fc1eb;}
   pre[data-codetype="JavaScript"] {border-left-color:#ff6c60;}
   pre[data-codetype="JQuery"] {border-left-color:#99c262;}
   pre.line-number[data-codetype]:before {content:attr(data-codetype); display:block; margin:-11px -13px 10px -54px; padding:8px 12px; font-family:Oswald,Arial,Sans-serif; font-size:12px; text-transform:uppercase; background-color:#41749f; color:white;}
   pre.line-number[data-codetype="CSS"]:before {background-color:#a9d86e;}
   pre.line-number[data-codetype="HTML"]:before {background-color:#4fc1eb;}
   pre.line-number[data-codetype="JavaScript"]:before {background-color:#ff6c60;}
   pre.line-number[data-codetype="JQuery"]:before {background-color:#99c262;}
   code {font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size:13px; color:#d14;}
   #comments code {color:#bbbb6d;}
   pre code {padding:0 !important; color: #a3a49a; background:none !important; border:none !important; display:block;}
   pre .line-number {float:left; margin:0 1em 0 -1em; color:#61686d; background-color:#39424e; text-align:right; min-width:2.5em; padding-right:4px;}
   pre .comment,
   pre .template_comment,
   pre .diff .header,
   pre .doctype,
   pre .pi,
   pre .lisp .string,
   pre .javadoc {color:#586e75; font-style:italic;}
   pre .keyword,
   pre .winutils,
   pre .method,
   pre .addition,
   pre .css .tag,
   pre .request,
   pre .status,
   pre .nginx .title {color:#859900;}
   pre .number,
   pre .command,
   pre .string,
   pre .tag .value,
   pre .rules .value,
   pre .phpdoc,
   pre .tex .formula,
   pre .regexp,
   pre .hexcolor {color: #7195a3;}
   pre .title,
   pre .localvars,
   pre .chunk,
   pre .decorator,
   pre .built_in,
   pre .identifier,
   pre .vhdl .literal,
   pre .id,
   pre .css .function {color:#569dcf;}
   pre .attribute,
   pre .variable,
   pre .lisp .body,
   pre .smalltalk .number,
   pre .constant,
   pre .class .title,
   pre .parent,
   pre .haskell .type {color:#aa985a;}
   pre .preprocessor,
   pre .preprocessor .keyword,
   pre .shebang,
   pre .symbol,
   pre .symbol .string,
   pre .diff .change,
   pre .special,
   pre .attr_selector,
   pre .important,
   pre .subst,
   pre .cdata,
   pre .clojure .title,
   pre .css .pseudo {color:#509a55;}
   pre .deletion {color:#dc322f;}
   pre .tex .formula {background:#073642;}

5. Untuk mengaktifkan di dalam komentar, tambahkan JavaScript di bawah ini di atas kode </body>
   

   <script type='text/javascript'>
     $(&#39;;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
       return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
       });
   </script>

6. Kemudian klik Save.

Sampai tahap ini syntax highlighter sudah bisa digunakan, sekarang tinggal mengaplikasikan. Untuk menggunakannya, cara penulisannya adalah seperti di bawah ini. Ingat, pada HTML view.

<pre><code>...kode HTML atau JavaSript yang sudah di Parse...</code></pre>