Add Syntax Highlighter with Tag pre, div, code, p

Banyak sekali kegunaan dari keberadaan fitur syntax highlighter Apalagi bagi kalangan para coderer, programmer, writer, or blogger! Sangkin pentingnya banyak di luaran sana web online yang menawarkan jasa pemasangan/pemakaian dari SyntaxHighlighter. Paling instant dan mengenakan sobat bisa mencoba: hilite, highlight.hohli, or tohtml. Kalau sobat pengen permanen dipasangkan di blog, maka pilihan AA Koben patut diperhitungkan ;))
Pilihanku jatuh kepada CodeMirror. Yes, kenapa gue memilih ini, karena ada beberapa penggunaan tag yg tidak biasa dalam pemakaiannya nanti! Pada umumnya taging yg di gunakan dalam pemakaian syntax-highlighting ketika sobat melakukan posting code/script adalah penggunaan tag <pre> atau <code>

Dengan bantuan codemirror & jQuery, sekarang kita bisa menuliskan script/coded secara suka-suka. Nanti sobat bisa memakai tag pre, code, div, p, or etc dalam pemanggilannya. Bahan-bahan yg mesti tersedia adalah...

Requirements


<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script&gt;

.codek {
    margin: 0;
    vertical-align: middle;
}
.inline {
    display: inline-block;
    margin: 0;
}
.CodeMirror,.CodeMirror-scroll {
    height: auto !important;   
    overflow: hidden;
}
.CodeMirror-sizer,.CodeMirror-linenumbers {
    background: #FFF;
}

Tempatkan bahan² di tempat semestinya :D Tambahkan declaration properti CSS sesuai selera. Jika sudah terpasang, jQuery script, tidak usah dipasangkan lagi. Perhatikan juga mode codemirror-nya. Pada kasus ini saya mencomot mode htmlmixed. Kalian bisa ganti/tambahkan sesuai kebutuhan modenya. Ane juga memakai link via CDN by cdnjs.

Langkah terakhir pasangkan seonggok script berikut sebelum/diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
$('.codek').each(function() {    
    var $this = $(this),
        $code = $this.html(),
        $unescaped = $('<div/>').html($code).text();   
    $this.empty();
    CodeMirror(this, {
        value: $unescaped,
        mode: 'javascript',
        lineNumbers: !$this.is('.inline'),
        readOnly: true
    });    
});
//]]>
</script>

Ketika mau postingkan kode/script ada baiknya di lakukan phrase terlebih dahulu. Berikut tag yang bisa kalian pergunakan dalam postingan...

<code class="codek inline">Your

balh-bleh-bloh</code>

<div class="codek">bleh() { 

    return bloh;

}</div>

<div class="codek inline"><h4>unescape test</h4></div>

<pre class="codek">

    your phrase script add here

</pre>

Kuncinya harus ada class="codek"

Source & demo by jsfiddle.net/mofle/tZVsS

BONUS

Menu - CSS Mega Menu - CSS 3d box - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Gooey text background with SVG filters - Sticky Title/Page Progress Bar - Hexagon Badges with Font Awesome icons - CSS Transform Creator - CSS-Only Nested Dropdown Navigation - CSS-only shimmering neon text - Pure CSS Background Image Scroll Effect - Perspective Nav CSS Only One Page Design

Bye :-h