Assalamualaikum Kawan, kali ini Admin Ren akan membahas tentang cara membuat sekaligus memakai syntax highlighter menggunakan prism.js. Seperti apakah syntax highlighter? Apakah ada manfaatnya ketika kita memakai Syntax Highlighter? Apakah ribet memasang Syntax Highlighter? Apakah bisa digunakan untuk Blogger? Bagaimana cara menggunakan Syntax Highlighter? Oke kawan nanti akan Admin Ren bahas di pembahasan ini mengenai syntax highlighter.

Baca juga nih Majukan Peternakan Indonesia Bersama ilmuhewan.com, Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota

Pasti kalian para coder/maniak coding sudah tau ya mengenai tentang Syntax Highlighter, hehe. Syntax Highlighter atau kalau Admin Ren terjemahkan ke dalam bahasa indonesia yaitu Penyorot Syntax merupakan salah satu metode penulisan khusus untuk code-code program pada artikel kalian kawan, nanti Admin Ren akan terapkan disini deh, hehe. Menurut Admin Ren sendiri sih, Syntax Highlighter merupakan salah satu cara metode penulisan code program dengan tampilan yang berbeda, ada warna-warninya gitu kawan pada code yang sudah kita buat, ya seperti sublime text atau text editor lainnya lah kawan, hehe. Akan lebih indah ketika melihat kode-kode program dengan warna-warni, kek ada manis-manisnya gitu deh, hehe.

Manfaat menggunakan Syntax Highlighter? Ohh ada kawan manfaatnya untuk menggunakan ini. Manfaatnya apa Admin Ren kalau kita menggunakan Syntax Highlighter? Manfaatnya itu adalah untuk memperindah suatu kode program pada artikel yang kita sajikan untuk tutorial pembahasan programming kawan, hehe. Selain itu, manfaat lainnya yang bisa kamu dapat menggunakan Syntax Highlighter yaitu memberikan rasa nyaman kepada para pembaca khusus para coder/maniak coding untuk membaca code program dan memahaminya langsung, dan mendapatkan kesan kesan dari para pembaca.

Ribet gak sih cara memasangnya? Tidak terlalu ribet kok kawan, kamu cukup ikuti langkah-langkah yang sudah Admin Ren susun, hehe. Kalau kamu sampai kena problem saat memasang syntax highlighter atau menggunakan syntax highlighter pada website kalian terutama pada cms/platform blogger, kamu boleh tanyakkan saja kepada Admin Ren melalui komentar yang sudah Admin Ren sediakan, hehe.

Bisa gak sih di gunakan ke blogger? Wahh bisa banget kawan, haha. Dan untuk semua CMS/Platform atau website yang dibuat tanpa platform pun bisa menggunakannya lho kawan, hehe.

Untuk cara menggunakannya, mari kamu simak pembahasan ini sampai tuntas yoo kawan, hehe.

Tutorial Menggunakan dan Cara pemasangan Syntax Highlighter Dengan Prism.js

1. Langkah yang paling utama itu adalah kamu harus login dulu kawan di blogger.com, hehe. Setelah login, masuk ke mode edit template kawan, dengan cara lihat pada navigasi kiri yang bertuliskan "Template" > Edit Template.
2. Kamu tempatkan code css dibawah ini di dalam

 
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('
' + $(this).html() + '
');
});
var pres = document.getElementsByTagName("pre");
for (var i = 0; i   pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}

//Pre Line Number
$('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("");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)})

 
 
// Statement code...