Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru

Pre Code Sintax Highlighter adalah sebuah tempat text area yang didalamnya berupa berisi kode programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi Pre Code Sintax Highlighter ini adalah untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan Pre Code Sintax Highlighter ini tampilan desktop dan mobile akan terasa responsive tidak membuat berantakan kode yang anda bagikan. Selain itu Pre Code Sintax Highlighter ini memudahkan pengunjung juga dalam menyalin kode, karena hanya double click secara otomatis kode terseleksi semua dan anda hanya tinggal menyalinnya.

Screenshoot:

Anda sering membagikan sebuah kode di tutorial anda? Jika iya, berarti anda sangat cocok sekali menggunakan tutorial yang saya bagikan kali ini. Jika anda ingin membagikan sebuah kode di artikel anda sebaiknya menggunakan Pre Code Sintax Highlighter. Jika anda membagikan sebuah kode menggunakan kotak script yang lain, alhasil kode nya berantakan sehingga terkadang kode tidak bekerja. Dengan adanya Pre Code Sintax Highlighter ini kode yang anda bagikan tidak lagi berantakan. Ok, langsung saja ke proses pembuatan.


Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru


Cara Pertama :

1. Buka Blogger - Kemudian Login
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
pre{background:#fff;white-space:pre;word-wrap:break-word;overflow:auto;}
pre.code{background:#374760;margin:20px 25px;max-height:500px;border-radius:2px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08);border: 3px solid #374760;}
pre.code label{font-family:sans-serif;font-weight:normal;font-size:13px;color:#444;position:absolute;left:1px;top:16px;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;border: 3px solid #374760;display:block;margin:0 0 0 60px;padding:15px 16px 14px;overflow-x:auto;font-size:13px;line-height:19px;color:#444;}
pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#aaa;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}}
pre.code-html{color:#fff;background: #374760;} 
pre.code-css{color:#fff;background: #374760;} 
pre.code-javascript{color:#fff;background: #374760;} 
pre.code-jquery{color:#fff;background: #374760;} 
pre:hover::after{opacity:0;visibility:visible;}
pre.code-css code{color:#e1fc61;background:#374760;border:1px solid #fff;}
pre.code-html code{color:#33d30e;border:1px solid #fff;background:#374760;}
pre.code-javascript code{color:#ff8100;background:#374760;border:1px solid #fff;}
pre.code-jquery code{color:#f85050;background:#374760;border:1px solid #fff;}

3. Jika sudah? Temukan lagi kode </body>
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('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>

5. Simpan Template!.

Cara Menggunakan :

Untuk memanggil kode, silakan anda copy & paste kode dibawah ini di postingan anda. Untuk bagian HTML, JS, JQuery harus di PARSE terlebih dahulu.
<pre class='code code-html'><label><span style="color: #fff">HTML</span></label><code> KODE HTML (PARSE) DISINI </code></pre>
<pre class='code code-css'><label><span style="color: #fff">CSS</span></label><code> KODE CSS DISINI </code></pre>
<pre class='code code-javascript'><label><span style="color: #fff">JS</span></label><code> KODE JAVA SCRIPT (PARSE) DISINI </code></pre>
<pre class='code code-jquery'><label><span style="color: #fff">JQUERY</span></label><code> KODE JQUERY (PARSE) DISINI </code></pre>   


Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru

Related Post

3 Responses to "Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru"

  1. cara membuat ada angka pada kolam highlighter nya gimna yaa.?

    ReplyDelete
    Replies
    1. lihat postingan saya sebelumnya gan : https://goo.gl/rMo822

      Delete
  2. makasih gann... https://teziger.blogspot.com kunbal nya

    ReplyDelete