Cara Membuat dan Menggunakan Syntax Highlighter Di Blogger

Kotak untuk meletakkan kode HTML ini sering disebut Prism Syntax Highlighter. Syntax Highlighter ini sering digunakan untuk meletakkan kode HTML,CSS,JavaScript,dan kode lainnya. Bagi anda yang memiliki blog tutorial pasti tidak asing dengan Syntax Highlighter ini. Syntax Highlighter ini membantu dalam membagikan tutorial blogging yang harus membagikan kode.

Jika anda hanya mengganti warna kode ketika anda membagikan kode si postingan mungkin akan membuat pengunjung anda bingung walaupun sudah dibedakan dengan warna. Mereka akan kesulitan untuk mencari kode yang harus disalin.

Banyak cara memang untuk menampilkan kode di postingan seperti menggunakan fitur blockquote,namun terkadang blockquote sudah digunakan untuk keperluan lain. Maka kita memakai kotak script kode syntax highlighther.

Cara Membuat dan Menggunakan Syntax Highlighter Di Blogger

Kekurangannya adalah dalam pemanggilannya. Kita harus menyalin kode pemanggil atau jika kita hafal kode pemanggil. Berbeda jika kita menggunakan fitur blockquote tinggal klik saja beres. Namun kelebihannya disini bisa membedakan mana kode CSS,HTML,dan Javascript.

Syntax Highlighter ini saya lihat pertama kali ini blog ArlinaDesign. Selain membantu pengunjung dalam membantu pengunjung dalam menyalin kode,Syntax Highlighter juga membuat tampilan blog tidak amburadul jika kode yang kita bagikan panjang dan banyak. Langsung saja berikut caranya :

Cara Memasang Prism Syntax Highlighter

Langkah 1
Silakan masuk dulu ke blogger, lalu Template → Edit HTML

Langkah 2
Silakan salin CSS dibawah ini,lalu letakkan diatas kode </style>

/* CSS Prism Syntax Highlighter */
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: 'Double click to selection';
    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;
}

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: #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='CSSku']:before {
    background-color: #00a1d6;
}

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

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

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

Langkah 3
Salin kode HTML dibawah ini lalu letakkan diatas kode </head> atau </body>

<script src='https://arlina-design.googlecode.com/svn/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> 

Jangan lupa untuk menyimpan template.

Sekarang untuk mulai menggunakan Syntax Highlighter maka anda harus membuat post baru pada postingan mode HTML dengan kode pemanggil dibawah ini.

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

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

Sebelum anda memasukkan kode yang akan anda bagikan anda harus memparse kodenya terlebih dahulu. Selesai. Itulah tutorial cara membuat syntax highlighter. Semoga bermanfaat. See you next article.

Subscribe to receive free email updates:

9 Responses to "Cara Membuat dan Menggunakan Syntax Highlighter Di Blogger"

  1. setelah di parse, cara meletakkannya dimana Mas. Masih pemula soalnya Mas Angga.

    ReplyDelete
  2. Cara meletakkan kode yang sudah di parse gimana Mas Angga. Saya sudah coba, belum berhasil.

    ReplyDelete
    Replies
    1. Yang diparse kode yang akan dibagikan saja gan. Untuk kode pemanggil kotak css (no parse) cukup diletakkan saat membuat artikel tapi pada mode HTML bukan compose. Lalu masukan kode y sudah diparse

      Delete
  3. gimana cara rubah warnanya gan biar jadi merah kotak scriptnya??

    ReplyDelete
  4. gan bagaimana cara merubah warnanya jadi warna merah biar buat taruk source code java??

    ReplyDelete
    Replies
    1. coba cari kode warna #2c323c pada kode css styilenya lalu ganti dengan kode warna merah

      Delete

Jangan ada link aktif di komentar karena komentar anda di moderasi!