Cara membuat dan Memasang Kode Pre (syntax highlighter) pada Blog. - Hanyalah Berbagi Informasi

Cara membuat dan Memasang Kode Pre (syntax highlighter) pada Blog.




Sobat blooger kali ini saya akan berbagi tutorial membahas cara membuat dan memasang kode pre (syntax highlighter) pada blog. Kode pre ini pasti sering kita jumpai pada blog-blog yang didalam artikel-artikelnya membahas tentang kode script, baik itu CSS, HTML, PHP, JavaScript dan sebagainya.

Kalau saya searching menggunakan kata kunci diatas, memang banyak sudah yang membahasnya namun kalau saya cermati pembahasannya hanya sebatas sampai kode pre itu dipasang di blog saja dan tidak sampai membahas sampai merubah warna syntax (syntax highlighter) secara otomatis yang sebelunnya kita inginkan.

Cara membuat dan Memasang Kode Pre (syntax highlighter) pada Blog


Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni. Dimana warna warni tersebut kita buat dengan bantuan pemanggilan script style CSS dan JavaScript.

Bagi anda yang memang masih bingung dalam pemasangan Syntax Highlighter, maka disini saya akan bantu langkah demi langkah tahapan pemasangannya sehingga mudah dipahami.

Lagi-lagi bagi anda yang masih pemula saya selalu mengingatkan sebelum melakukan perubahan terhadap template anda ada baiknya backup terlebih dahulu template blog anda. Selanjutnya apabila terjadi hal-hal diluar kendali anda yang mengakibatkan rusak/ amburadulnya tampilan blog maka anda tinggal me-restore template yang sudah dibackup sebelumnya.


Langkah #1 : Awal yang anda lakukan adalah login ke akun blogger anda dan masuk ke template lalu pilih edit HTML.

Langkah #2 : copy kode dibawah ini persis diatas kode ]]></b:skin> atau </style>

pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#f1f1f1;
font-size:12px;
clear:both;
border-left:15px solid #ccc;
border-right:1px solid #ccc;
color:#999;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:15px;
color:#ff3c00;
font-size:13.5px;
}
pre code {
display: block; padding: 0.5em;
color: #555;
}
#comments pre code {
padding: 0 !mportant;
color: #555;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: slategray;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #0077aa;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #990055;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #669900;
}
pre .attribute {
color: #588400;
}
pre .rules .value{
color: #333;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #a0733f;
}
pre .deletion {
color: #905;
}
pre .tex .formula {
background: #073642;
}

Langkah #3 : copy kode dibawah ini diatas kode </head>

<script src="https://googledrive.com/host/0B8LRlX2yBwugdHhPYXlRUE1LYU0/highlight-pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

Langkah #4 : copy kode dibawah ini sebelum kode </body>,

<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>

Info!
fungsi dari kode diatas adalah selecta all apabila double click pada area script yang akan diseleksi.
Langkah #5 : Save template anda.

Untuk penerapan syntax code nya, scriptnya harus diapit antara <pre><code> dan </code></pre>. Dan perlu diingat script yang akan ditampilkan tadi harus di parse terlebih dahulu.

Lalu kenapa harus di parse?
Nah fungsi dari kita melakukan parse agar kumpulan script atau code tidak aktif sehingga munculnya error dan apabila dilakukan parse maka kode/script akan berubah menjadi kode unik (entitas) yang apabila diterapkan pada artikel ini kode-kode tersebut dibaca sebagai text biasa yang tidak memiliki nilai eksekusi script. Untuk memparsing script masuk ke blog parse ini

CONTOH :
Script/code pada langkah-langkah diatas adalah merupakan contoh aplikasi memasang kode pre (sysntax highlighter).

Bila masih ada yang mengalami kendala, silahkan kita diskusikan melalui kotak komentar. Terima kasih.

Cara membuat dan Memasang Kode Pre (syntax highlighter) pada Blog. Cara membuat dan Memasang Kode Pre (syntax highlighter) pada Blog. Reviewed by Om Rudi on April 15, 2016 Rating: 5

Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.