HLJS Parse untuk Median UI, Plus UI, Fletro Pro dan iMagz Blogger Template

HLJS Parse Median UI - Template Buatan JagoDesain lumayan booming, terbukti sangat banyak pengguna median UI. Termasuk saya yang sudah malas oprek template, menggunkan template pemberian seseorang yang sudah sedikit dimodifikasi

Apa HLJS Parse?

HLJS Parse adalah Tool untuk Memberikan warna pada code atau disebut Syntaxhighlight. Dengan HLJS Parse, kita tidak usah menyertakan JavaScript dari Highlight.js karena akan diparse oleh tool ini. Tool ini khusus untuk Template Median UI dan Plus UI, Untuk Fletro Pro dan iMagz ada tambahan CSS (sudah saya sertakan di bawah). Tool ini direquest oleh Kang Iwan Efendi

HLJS Parse Median UI

Untuk tool ini sama dengan versi sebelumnya, namun ada sedikit penyesuaian. Link Tool https://tutorial.kang-ismet.com/tryit/hljs-parse-median-ui.html. Silahkan iframe di Blog sobat, bisa gunkan format seperti ini:

<iframe frameborder="0" height="750" src="https://tutorial.kang-ismet.com/tryit/hljs-parse-median-ui" width="750"><br />
  <div aria-label="Code Converter" overflow="" role="button" tabindex="0">
    Code Converter
  </div>
</iframe>

HLJS Parse Median UI

Apa yang berbeda?

Yang berbeda dari tool sebelumnya adalah dalam format penulisan. Untuk tool default yang ada di Blog ini formatnya adalah

<pre><code>
   .....
</code></pre>

Pada template Median UI, Fletro Pro, iMagz (buatan JagoDesain) agak tidak umum menurut saya , yaitu dengan menambahkan tag div. Jadi formatnya seperti ini

<div class="pre">
  <pre> ..... </pre>
</div>

Pada Tool HLJS Parse Median UI ini, setelah di-parse tambahkan class pada <div class="pre"> tergantung kodenya. Menjadi <div class="pre html"> atau <div class="pre css"> atau <div class="pre js">, pada Result.

Bandingkan HLJS Parser Default dengan HLJS Parse Median UI

HLJS Parse Default HLJS Parse Median UI

Template Fletro Pro dan iMagz

Untuk template Fletro Pro dan iMagz, belum menggunakan CSS HLJS. Silahkan tambahkan CSS ini di Blog sobat

/* hljs */
.hljs-comment, .hljs-code, .hljs-meta, pre i.gray{color:#656e77}
.hljs-name, .hljs-title, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class, .hljs-selector-tag, .hljs-literal, pre i.red{color:#b75501} 
.hljs-keyword, .hljs-string, .hljs-type, .hljs-section, .hljs-quote, .hljs-built_in, .hljs-builtin-name, pre i.blue{color:#015692} 
.hljs-attribute{} .hljs-params, pre i.green{color:#54790d } 
.hljs-number, .hljs-symbol{color:#f15a5a } 
.hljs-regexp, .hljs-link{color:#72621d } 
.hljs-deletion{background-color:#fef5fa;color:#e51661} 
.hljs-addition{background-color:#e8f0fe;color:#272eb5} .hljs-strong{font-weight:bold}
.hljs-code, .hljs-emphasis{font-style:italic}

Semoga bermanfaat