Cara Memakai Syntax Highligter Pada Blog


 Syntax Highlighter atau dalam bahasa Indonesia yakni Penyorot Sintaks yaitu salah satu m Cara Menggunakan Syntax Highligter Pada Blog

TANKYSTREET - Syntax Highlighter atau dalam bahasa Indonesia yakni Penyorot Sintaks yaitu salah satu metode yang dipakai untuk membedakan antara goresan pena dan kode-kode yang ditulis dalam postingan biar lebih gampang dibedakan. Lebih mudahnya Syntax Highlighter ini dapat diartikan sebagai untuk menciptakan isyarat berwarna-warni.

Ada berbagai style yang dapat dipakai dalam penulisan kode, hal ini bergantung dari masing-masing isyarat CSS yang digunakan. Nah, laba memakai syntax highlighter yakni kita dapat dengan gampang memasang kode-kode di dalam postingan dengan tampilan yang berbeda dan khas. Berbeda dengan kotak script pada postingan sebelumnya, syntax highlighter akan lebih menarik jikalau kita menggunakannya.

Cara Menggunakan Syntax Highlighter Pada Blog :
Login akun blogger Anda.
Lalu pilih Template > Edit HTML
Salin isyarat di bawah ini dan tempel di atas isyarat </head>

<script src='https://cdn.rawgit.com/NegeriMakmur/js/master/syntax-highlighter.js'></script> <script>hljs.initHighlightingOnLoad();</script>

Cari isyarat ]]></b:skin> atau </style>
Keterangan : Pilih salah satu, jikalau tidak bekerja apabila diletakkan pada ]]></b:skin> maka letakkan pada </style>



pre, i[rel=&quot;pre&quot;] {padding:.8em 1em; margin:0; background-color:#2f3741; border-left:4px solid #40627E; font-size:11px; color:#839496; font-family:Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,Monospace; line-height:1.4em; position:relative; white-space:pre; word-wrap:normal; overflow:auto;} pre.line-number {background:#2f3741 url(https://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none;} pre.line-number:after {content:&quot;&quot;; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute;} pre[data-codetype=&quot;CSS&quot;] {border-left-color:#5fbbba;} pre[data-codetype=&quot;HTML&quot;] {border-left-color:#4fc1eb;} pre[data-codetype=&quot;JavaScript&quot;] {border-left-color:#ff6c60;} pre[data-codetype=&quot;JQuery&quot;] {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=&quot;CSS&quot;]:before {background-color:#a9d86e;} pre.line-number[data-codetype=&quot;HTML&quot;]:before {background-color:#4fc1eb;} pre.line-number[data-codetype=&quot;JavaScript&quot;]:before {background-color:#ff6c60;} pre.line-number[data-codetype=&quot;JQuery&quot;]:before {background-color:#99c262;} code {font-family:Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,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;}

Untuk mengaktifkan syntax highlighter di dalam komentar tambahkan JavaScript di bawah ini di atas isyarat </body>
Salin CSS di bawah ini dan tempel di atas isyarat ]]></b:skin> atau </style>


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

Kemudian simpan template.
Sampai tahap ini syntax highlighter sudah dapat digunakan, kini tinggal digunakan. Untuk menggunakannya cara penulisannya yakni menyerupai di bawah ini. Ingat, pada mode HTML bukan Compose.

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

Selamat mencoba