✔ Cara Menciptakan Syntax Highlighter Di Blogger

Syntax Highlighter yaitu suatu kotak aba-aba script yang sanggup menciptakan goresan pena berupa aba-aba yang kita simpan di dalam postingan akan warna-warni. Dulu aku sempat mencarinya dengan keyword cara menciptakan kotak aba-aba HTML di dalam postingan blogger yang akan membingkai aba-aba html, ternyata kotak di dalam postingan ini di sebut dengan istilah Syntax Highlighter.

Dengan menciptakan Syntax Highlighter di dalam postingan akan menciptakan tampilan barisan aba-aba di dalam artikel menjadi indah. Selain itu dengan menerapkan Syntax Highlighter di dalam artikel, postingan anda akan terlihat lebih rapi dan juga profesional, dengan begitu pembaca akan lebih gampang memahami aneka macam aba-aba yang kita simpan di dalam artikel.


Biasanya Syntax Highlighter ini di gunakan oleh seorang blogger yang blognya membahas wacana aneka macam ilmu pengkodingan termasuk blogger yang setiap menciptakan artikel di dalamnya terdapat script HTML, JavaScript, jQuery atau yang lainnya menyerupai pada artikel aku yang ini, Sehingga Syntax Highlighter ini sangat di perlukan.

Cara Membuat Syntax Highlighter di Dalam Postingan Blogger

Pertama. Cari aba-aba </head> di dalam sajian edit HTML, kemudian letakkan aba-aba di bawah ini di atas aba-aba tersebut.

<script type='text/j4vascript'>
 //<![CDATA[
 function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css");
 //]]>
 </script>

Kedua. Cari aba-aba </body> atau yang serupa dengan aba-aba tersebut. Lalu letakan aba-aba berikut ini di atas aba-aba </body>.

<b:if cond='data:view.isPost'>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/j4vascript'/>
 <script type='text/j4vascript'>
 //<![CDATA[
 hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
 //]]>
 </script>
 </b:if>

Ketiga. Simpan aba-aba CSS di bawah ini di atas aba-aba </style>. Tujuannya supaya tampilannya menjadi lebih rapi.

/* Highlight CSS */
 code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;word-spacing:normal;font-size:14px;line-height:1.3em;}
 pre code{padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);}
 .post-body code{color:#e20d58}

Keempat. Simpan perubahan template yang sudah teman-teman tambahkan aba-aba untuk menciptakan Syntax Highlighter di blogger.

Cara Menerapkan Syntax Highlighter di Dalam Postingan

Untuk memakai Syntax Highlighter teman-teman perlu memanggilnya di dalam sajian compose memakai aba-aba di bawah ini, dengan begitu kode-kode yang anda masukan di dalam artikel akan di kemas dengan sebuah kotak atau sanggup juga di sebut dengan bingkai.

<pre><code>
 Simpan Kode JavaScript, jQuery atau CSS disini
 </pre></code>

Nah itulah tutorial cara menciptakan syntax highlighter di blogger.
Sumber http://www.masigun.com

Share this post

Berlangganan update artikel terbaru via email: