Cara membuat pembungkus script atau Syntag higlighter diblog

Cara membuat pembungkus script atau Syntag higlighter diblog

syntag higlighter
mukhlismj.com

Sebelumnya saya udah pernah buat artikel mengenai cara pasang syntag seperti arlina design. tapi itu dulu waktu saya pakek templatenya beliau berjalan dengan lancar, namun ketika kali ini saya pakek template nya mas sugeng, setelah saya coba pasang tapi kok ga bisa, bikin pala pusing.

akhirnya saya nemu cara baru, dan menurutku ini paling simple dan paling mudah untuk di ikutin.

sebenarnya bisa dibilang ini merupakan artikel yang aku tulis ulang sih, yang saya temui di blognya bung franki.

karena ini berdasarkan pengalaman pribadi. sudah saya coba saya pasang dan berhasil. jadi saya pikir ga ada salahnya juga untuk aku share kembali.

iya seperti biasalah, akhirnya saya tulis ulang biar tidak lupa di waktu yang akan datang.

langsung aja ke caranya guys!


Langkah 1

masuk ke Tema dan pilih Edit HTML. kemudian pastekan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Namun dalam percobaan saya, ini saya pastekan diatas </head>



<style type='text/css'>
/* Syntax Highlighter Monokai Sublime */
.post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
.post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
pre,pre code{white-space: pre-wrap;}
.hljs {
display: block;
overflow-x: auto;
padding:0 0.5em 0.5em;
margin:0;
background: #23241f;
max-height:360px;
}

.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}

.hljs-strong {
font-weight: bold;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}
.hljs::-webkit-scrollbar{width:8px;height:25px;}
.hljs::-webkit-scrollbar-thumb
{border-radius:2px; background:rgba(255,255,255,.2)}
</style>


Selanjutnya cari kode </body> atau  &lt;!--</body>--&gt;&lt;/body&gt; dan Pastekan kode dibawah ini diatas kode tadi.


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


Setelah semuanya selesai, kemudian simpan Tema.


Langkah 2

Cara Menggunakan Syntag Higlighter

Letakkan kode dibawah ini didalam mode tampilan HTML bukan di mode tampilan MENULIS (COMPOSE) ya.



<pre><code>

Kode CSS/JavaScript/PHP posisinya disini

</code></pre>


pastekan kode (Script) kalian ke dalam kode tersebut. tapi ingat sebelum kodenya dipastekan, pastikan kode tersebut sudah di PARSE terlebih dahulu, supaya kodenya bisa terbaca dengan baik di blog kalian.

Untuk mem Parse kode (script) bisa di blogcrowds


Variasi Syntag Higlighter

Sebenarnya untuk menulis Syntag Higlighter itu cukup banyak variasinya, namun yang paling sering kita temui diantaranya seperti: CSS, JAVASCRIPT, HTML, dan PHP.

Nah, untuk menampilkan variasi warna yang lebih spesifik berdasarkan fungsinya, teman-teman bisa pakai kode-kode berikut ini untuk memanggilnya.

Syntag Higlighter CSS


<pre><code class="css">

Kode CSS yang sudah di parse disini

</code></pre>


Syntag Higlighter Javascript


<pre><code class="javascript">

Kode JavaScript yang sudah di parse disini

</code></pre>


Syntag Higlighter html


<pre><code class="html">

Kode HTML yang sudah di parse disini

</code></pre>


Syntag Higlighter php


<pre><code class="php">

Kode PHP yang sudah di parse disini

</code></pre>


ingat kode-kode diatas berfungsi untuk memanggil kode Syntag nya ya, jadi bisa pilih aja sesuai kebutuhan (keinginan) teman-teman.

Itulah artikel kali ini, jika kalian merasa artikel ini bermanfaat, jangan lupa untuk share di sosmed kalian agar teman-teman yang lain bisa terbantu juga.

terimakasih.

Load comments