Memasang Syntax Highlighter Pre Code Di Blogger

Cara Membuat Syntax Highlighter Pre Code Di Blogger

Mas Tamvan bebrabgi tutorial cara memasang Syntax Highlighter Pre Code pada post di blogger, biasanya ini sering di sebut dengan nama syntax highlighting, Prism Syntax Highlighter, Pre Code Parser atau Pre Code Seleksi, fungsi dan keuntungan menggunakan Syntax Highlighterini adalah untuk membuat tampilan script lebih jelas pada sebuah post dan tentunya akan memudahkan si pembaca untuk mencopy dan membedakan mana Script HTML, CSS, Javascript dan Jquery. Jadi tidak akan bingung untuk meletakannya dimana. 

Jadi bagi kalian yang suka membagikan script di blognya, cocok sekali untuk menggunakan Prism Syntax Highlighterini yang akan membuat si pengunjung lebih jelas memahami perbedaan penempatan sebuah script. 

Untuk melihat tampilan Prism Syntax Highlighter dengan jelas silahkan lihat di link berikut ini.

Result

Tutorial Blogger Lainnya :

• Membuat Widget About Me Dengan Tombol Pop Up

• Membuat Komentar Disqus Show Hide

• Membuat Sitemap Blogger Responsive Seo Friendly

Tutorial Cara Membuat Prism Syntax Highlighter

• Login ke Blogger.com

• Pilih Template -> Edit HTML, Cari Kode

• ]]></b:skin> Atau </style>

• Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

• Lanjut, Sekarang Tinggal Memasukan Javascriptnya.

• Cari </body> dan masukan Javascript di bawah ini tepat di atasnya!!

<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

• Sekarang tinggal Save Template.

• Sekarang Tinggal bagaimana penerapan Syntax Highlighter Pre Code Di Post Bloggernya?

Ini HTML untuk membungkus script dengan Syntax Highlighter.

<pre class='code code-html'><label>HTML</label><code>
Letakan HTMLnya Di Sini
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
Letakan CSSnya Di Sini
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
Letakan Javascriptnya Di Sini
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
Letakan Jquerynya Di Sini
</code></pre>

• Silahkan masuk / bikin postingan baru.

• Nanti tinggal masuk ke tab HTML pada postingannya.

• Terus masukan HTML untuk membungkus scriptnya.

• Masuk lagi ke tab Compose dan pastekan script yang mau agan bagikan.

Ok, sampai disini sudah tamvan, tinggal publikasikan.

Note :

Penulisan di Tab HTML cukup masukan script buat membungkus kode yang mau agan share, karena kalo di masukan pada mode HTML nantinya akan error.

Cukup sekian dan terimakasih, semoga artikel dari Mas Tamvan tentang Syntax Highlighter Pre Codeini bermanfaat, jika ada yang mau di tanyakan silahkan bertanya di kolom komentar ya :)