✔ 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 dibentuk untuk mempermudah pembaca dalam memahami isi konten atau artikel, syntax highlighter biasanya banyak digunakann pada web atau blog yang bertemakan tutorial khususnya wacana dunia web, blog dan pemrograman.

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

Cara memasang Prism Syntax Highlighter di Blogger

Langkah Pertama
Masuk ke Blogger > Tema > Edit HTML

Langkah Kedua
Salin arahan di bawah ini, lalu letakkan sebelum arahan </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 arahan di bawah ini, lalu letakkan sebelum arahan </body> atau </head>. Gunakan gunakan CTRL + F untuk mempermudah pencarian.

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/j4vascript'/>  <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/j4vascript'> 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 memakai highlighter tersebut pada postingan, kita harus memasukan arahan panggil di bawah ini dengan cara memasukkannya ke dalam postingan Tab HTML.

<pre title="✔ Cara Memasang Prism Syntax Highlighter pada Blogger" data-codetype ="HTMLku"><code class="language-markup"> ... arahan HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="✔ Cara Memasang Prism Syntax Highlighter pada Blogger" data-codetype ="CSSku"><code class="language-css"> ... arahan CSS di sini ... </code></pre> <pre title="✔ Cara Memasang Prism Syntax Highlighter pada Blogger" data-codetype ="JavaScriptku"><code class="language-j4vascript"> ... arahan JavaScript di sini ... </code></pre> <pre title="✔ Cara Memasang Prism Syntax Highlighter pada Blogger" data-codetype ="JQueryku"><code class="language-j4vascript"> ... arahan jQuery di sini ... </code></pre> 

Kode HTML, CSS atau JavaScript yang akan diposting harus di parse terlebih dahulu. Untuk mem-parse arahan HTM CSS atau JavaScript silahkan gunakan Parse Tools. Sekian dan agar bermanfaat. Sumber: arlinadzgn.com.
Sumber http://www.randi.id

Share this post

Berlangganan update artikel terbaru via email: