Social Items

Cara Memasang Prism Syntax Highlighter pada Blogger - Syntax Highlighter merupakan salah satu fitur dan pendukung pada blog yang dibuat untuk mempermudah pembaca dalam memahami isi konten atau artikel, syntax highlighter biasanya banyak digunakann pada web atau blog yang bertemakan tutorial khususnya tentang dunia web, blog dan pemrograman.


Dengan Syntax Highlighter, penulis dapat memasukkan sebuah kode HTML, Java script atau  jQuery kedalam postingan artikel dengan susunan kode yang rapi dan terstruktur sehingga dapat mudah memahami oleh pembaca. Pengunjung akan merasa nyaman dalam membaca dan artikel Anda akan terlihat lebih professional.

Baca juga:
Cara Modifikasi Tampilan Heading H2 pada Postingan

Cara memasang Prism Syntax Highlighter di Blogger


Langkah Pertama
Masuk ke Blogger > Tema > Edit HTML

Langkah Kedua
Salin kode di bawah ini, kemudian letakkan sebelum kode </style>. Gunakan gunakan CTRL + F untuk mempermudah pencarian.

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

Langkah Keempat
Salin kode di bawah ini, kemudian letakkan sebelum kode </body> atau </head>. Gunakan gunakan CTRL + F untuk mempermudah pencarian.

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

Langkah Kelima Simpan Tema / Template Sampai disini kita sudah sukses memasang prism syntax highlighter pada blogger. Selanjutnya, untuk menggunakan highlighter tersebut pada postingan, kita harus memasukan kode panggil di bawah ini dengan cara memasukkannya ke dalam postingan Tab HTML.

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

Kode HTML, CSS atau JavaScript yang akan diposting harus di parse terlebih dahulu. Untuk mem-parse kode HTM CSS atau JavaScript silahkan gunakan Parse Tools. Sekian dan semoga bermanfaat. Sumber: arlinadzgn.com

Cara Memasang Prism Syntax Highlighter pada Blogger

Cara Memasang Prism Syntax Highlighter pada Blogger - Syntax Highlighter merupakan salah satu fitur dan pendukung pada blog yang dibuat untuk mempermudah pembaca dalam memahami isi konten atau artikel, syntax highlighter biasanya banyak digunakann pada web atau blog yang bertemakan tutorial khususnya tentang dunia web, blog dan pemrograman.


Dengan Syntax Highlighter, penulis dapat memasukkan sebuah kode HTML, Java script atau  jQuery kedalam postingan artikel dengan susunan kode yang rapi dan terstruktur sehingga dapat mudah memahami oleh pembaca. Pengunjung akan merasa nyaman dalam membaca dan artikel Anda akan terlihat lebih professional.

Baca juga:
Cara Modifikasi Tampilan Heading H2 pada Postingan

Cara memasang Prism Syntax Highlighter di Blogger


Langkah Pertama
Masuk ke Blogger > Tema > Edit HTML

Langkah Kedua
Salin kode di bawah ini, kemudian letakkan sebelum kode </style>. Gunakan gunakan CTRL + F untuk mempermudah pencarian.

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

Langkah Keempat
Salin kode di bawah ini, kemudian letakkan sebelum kode </body> atau </head>. Gunakan gunakan CTRL + F untuk mempermudah pencarian.

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

Langkah Kelima Simpan Tema / Template Sampai disini kita sudah sukses memasang prism syntax highlighter pada blogger. Selanjutnya, untuk menggunakan highlighter tersebut pada postingan, kita harus memasukan kode panggil di bawah ini dengan cara memasukkannya ke dalam postingan Tab HTML.

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

Kode HTML, CSS atau JavaScript yang akan diposting harus di parse terlebih dahulu. Untuk mem-parse kode HTM CSS atau JavaScript silahkan gunakan Parse Tools. Sekian dan semoga bermanfaat. Sumber: arlinadzgn.com

> Silahkan berkomentar sesuai dengan postingan di atas;
> Gunakan akun Google resmi (bukan Unknown / Pengguna Tanpa Nama);
> Berkomentar dengan url ( link hidup / mati ) tidak akan dipublish / didelete!
EmoticonEmoticon

Subscribe Our Newsletter