Cara Membuat Kotak Pembungkus Syntax Highlighter Pada Blogger

Cara Membuat Kotak Pembungkus Syntax Highlighter Keren Pada Blogger-Oke semua! ketemu lagi sama admin kece yang satu ini hehe...

Untuk kesempatan kali ini saya akan memberitahukan bagaimana Cara Membuat kotak pembungkus Syntax Highlighter Pada Blogger. Syntax Highlighter pada umumnya dipakai pada situs atau website pemrograman untuk menampilkan kode  source seperti HTML, CSS, JQUERY, maupun Javascript

Apa itu Syntax Highlighter?

Sedikit penjelasan buat yang belum tahu. Apa itu syntax highlighter? menurut wikipedia syntax highlighter adalah fitur editor teks yang digunakan untuk bahasa pemrograman, skrip, atau markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam warna dan font berbeda sesuai dengan kategori istilah.

Tanpa panjang lebar lagi, langsung saja mari kita simak tutorial Cara Membuat Syntax Highlighter Keren Pada Blogger.

Membuat Syntax Highlighter.

• Pertama, pastikan anda sudah login ke blogger kalian masing-masing
• Klik menu Template/Tema, dan klik edit HTML
• Agar kalian mudah menemukan kode script, kalian bisa klik CTRL + F pada keyboard dan ketik ]]></b:skin> pada kotak pojok atas sebelah kanan, lalu tekan Enter.
• Selanjutnya cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: '</>';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

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: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

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: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.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;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='jQuery']:before {
    background-color: #e5b460;
}

pre[data-codetype='Javascript']:before {
    background-color: #75d6d0;
}

• Selanjutnya cari lagi kode </body> atau &lt;/body&gt; lalu paste kode dibawah ini, tepat diatasnya.

<script src='http://yourjavascript.com/11157944646/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),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>

• Setelah itu klik simpan template.

Sampai disini kita telah selesai memasang Syntax Highlighter, namun untuk bisa menggunakannya kita perlu menambahkan kode dibawah ke postingan yang ingin diberi Syntax Highlighter.

<pre data-codetype="HTML" title="HTML"><code class="language-markup">
.... .... .... ....
KETIK CODE HTML DISINI
.... .... .... ....
</code></pre>

<pre data-codetype="CSS" title="CSS"><code class="language-css">
.... .... .... ....
KETIK CODE CSS DISINI
.... .... .... ....
</code></pre>

<pre data-codetype="Javascript" title="Javascript"><code class="language-javascript">
.... .... .... ....
KETIK CODE Javascript DISINI
.... .... .... ....
</code></pre>

<pre data-codetype="jQuery" title="jQuery"><code class="language-javascript">
.... .... .... ....
KETIK CODE jQuery DISINI
.... .... .... ....
</code></pre>

Silakan gunakan kode pemanggil diatas sesuai dengan jenis kode apa yang akan anda bagikan.

Bagaimana, mudah bukan Cara Membuat Syntax Highlighter Keren Pada Blogger. Buat kalian yang kesulitan mempraktekan kode tersebut kalian bisa bertanya di kolom komentar pasti saya bantu. Sekian untuk tutorial kali ini. Tunggu artikel terbaru dari kami

Jika Anda ingin menambahkan kode HTML pada postingan seperti di atas lebih baik parse dulu kode tersebut menggunakan tool Parse HTML. Tapi kalau kode css atau javascript Anda tidak perlu melakukan parse terlebih dahulu jika memungkinkan.

Share this post