Cara Mudah Membuat (Syntax Highlighter) Pre Code Seleksi Otomatis Pada Postingan Blog

Tutorial.web.id – Cara Mudah Membuat (Syntax Highlighter) Pre Code Seleksi Otomatis Pada Postingan Blog. Bagi sobat blogger pastinya sudah mengenal dan tidak asing lagi apa itu Pre Code ya kan? buat yang belum tahu, saya jelaskan secara singkat ya soalnya saya masih belum mahir untuk merangkai kata - kata yang panjang hehe. Pre Code berfungsi untuk membungkus kode HTML, CSS, JAVASCRIPT maupun JQUERY di halaman posting agar terlihat rapi dan istimewa untuk di copy - paste, singkat saja simak cara memasang simple pre code seleksi di bawah ini.

Contoh posting kode HTML ⇓

<pre><code>Press Me!</code></pre>

Cara memasang kode HTML tersebut di atas tidak akan muncul dan bekerja jika sobat pasang langsung pada postingan.

Kenapa tidak bisa muncul ?

Karena sebelum memasang kode HTML, CSS, JAVASCRIPT dan JQUERY hendaknya diparse dulu.

Bagaimana caranya ?

Sobat bisa menggunakan Tools Parse di halaman HTML Parser Tool

Oke, langsung saja kita mulai langkahnya

Masuk ke akun blog sobat -> template -> Edit HTML salin kode CSS di bawah ini sebelum </style>

/* CSS Simple Pre Code */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#222;position:relative;max-height:500px;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#fff;display:block;margin:0 0 15px 0;font-weight:400;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#c2bfd2;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#ba3a3e;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#666;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
code .token.operator {color:#1887dd;}
code .token.atrule,code .token.attr-value {color:#009999;}
pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;}
code .token.keyword {color:#e13200;font-style:italic;}
code .token.comment {font-style:italic;}
code .token.regex {color:#ccc;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#222;}
.comments pre::before {content:'Code';font-size:12px;position:relative;top:0;
background-color:#5a9ad2;padding:1px 6px;left:0;right:0;color:#fff;text-transform:uppercase;
display:inline-block;margin:0 0 10px 0;font-weight:400;border-radius:3px;border:none;}
.comments pre::after {font-size:11px;}
.comments pre code {color:#c2bfd2;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#2a2a2a;border-right:1px solid #3a3a3a;}
.line-numbers-rows > span {display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before {content:counter(linenumber);color:#666;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype="CSSku"]:before{background-color:#0183c5;}
pre[data-codetype="HTMLku"]:before{background-color:#CF000F;}
pre[data-codetype="JavaScriptku"]:before{background-color:#c2a3d0;}
pre[data-codetype="JQueryku"]:before{background-color:#c2ac79;}

Lanjut, salin dan simpan javascript kode di bawah ini sebelum tag penutup </body>

<!-- js Syntax Highlighter -->
<script src='https://cdn.rawgit.com/tutorialwebid/02cda35c08ff7fd35d75d22af8f62861/raw/a8d4524f63eb95bc6b6e300419e88d8e185887e4/prism.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Script di atas fungsinya adalah ketika diklik dua kali (double click) maka akan otomatis ter seleksi semua.

Kemudian save template dan silakan cek hasilnya. Eits… tapi sampe sini prosesnya belum selesai ya mas/mba bro.

Langkah terakhir yaitu cara penerapan kode di postingan, simpan kode di bawah ini di notepad save di komputer sobat, jadi saat membutuhkan tinggal copy saja tanpa harus browsing lagi hehehe.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Selamat mencoba dan semoga berhasil. Jangan lupa di share ya jika sekiranya dapat membantu sobat blogger yang lain.

Berlangganan update artikel terbaru via email:

Share this post