Cara Membuat Syntax Highlighter di postingan

Syntax Highlighter merupakan dimana kode tersebut untuk menyimpan kode programan-programan agar terlihat lebih menarik,walaupun banyak kode kode untuk menyimpan kode perograman tersebut tetapi menggunakan Syntax highlighter sudah menjadi pavorite para blogger,selain itu juga syntax highlighter ini di sertai dengan penomoran yang sesuai dengan Jumlah baris kode yang di letakan di kotak Syntax Highlighter tersebut

Selain itu juga dengan menggunakan Sytax Highlighter tersebut maka akan memudahkan blogger lain nya atau pengujung lain nya menentukan mana Javascript,CSS,HTML dan jQuery karena di kotak syntax highlighter tersebut sudah di sertai dengan title nya sehingga akan terkesan rapi terlihat nya

Memasang Kode Syntax Highlighter di postingan Blog

Bagi sobat blogger yang dimana blog nya di gunakan untuk berbagi trik dan tips seputar blog,mungkin Syntax highlighter ini sudah terpasang,tetapi tidak ada salah nya jika asaya berbagi lagi untuk blogger lain nya,dan untuk penerapan nya silahkan ikuti langkah-langkah di bawah ini

• Silahkan sobat Masuk ke bagian Dashboard Blogger
• Setelah itu silahkan klik Template dan kemudian Edit Html
• Setelah berada di bagian Edit Html silahkan sobat blogger cari kode </b:skin> atau </style> kemudian letakan kode berikut sebelum kode tersebut

/* CSS Syntax Highlighter */
pre {padding:30px 10px 10px 10px;margin:.3em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#222;position:relative;max-height:500px;border-radius:7px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#fff;display:block;margin:0 0 15px 0;font-weight:400;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#fff;line-height:15px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {font-family:arial;line-height:10px;color:#88a9ad;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#c2bfd2;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
.comments pre {padding:10px 10px 15px 10px;background:#222;}
.comments pre::before {content:'Code';font-size:12px;position:relative;top:0;
background-color:#0fc66f;padding:1px 6px;left:0;right:0;color:#fff;text-transform:uppercase;
display:inline-block;margin:0 0 10px 0;font-weight:400;border-radius:3px;border:none;}
.comments pre::after {font-size:11px;}
.comments pre code {color:#c2bfd2;}
.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;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#2a2a2a;border-right:1px solid #3a3a3a;}
.line-numbers-rows > span {display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before {content:counter(linenumber);color:#666;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype="CSS"]:before{background-color:#AD3A45;height:12px;}
pre[data-codetype="HTML"]:before{background-color:#A4469C;height:12px;}
pre[data-codetype="Javascript"]:before{background-color:#6A468D;height:12px;}
pre[data-codetype="jQuery"]:before{background-color:#00927A;height:12px;}

• Langkah selanjut nya silahkan sobat cari kode </body> pada umum nya kode tersebut berada di akhir template/kode,silahkan letakan kode berikut sebelum kode tersebut

<script src='http://yourjavascript.com/11157944646/prism.js' type='text/javascript'/> <script> $(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;); Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)}) </script>

Agar kode tersebut berpungsi silahkan sobat lakukan hal berikut

Cara menggunakan Syntax Highlighter di Postingan Blog

 Setelah sobat memasang kode Css seperti pada langkah-langkah di atas,langkah selanjut nya silahkan Sobat blogger masuk ke bagian Postingan dan letakan kode berikut di dalam postingan

<pre data-codetype="HTML" title="HTML"><code class="language-markup">...KETIK CODE HTML DISINI .... </code></pre>

<pre data-codetype="CSS" title="CSS"><code class="language-css">...KETIK CODE CSS DISINI ....</code></pre>

<pre data-codetype="Javascript" title="Javascript"><code class="language-javascript">...KETIK CODE Javascript DISINI ....</code></pre>

<pre data-codetype="jQuery" title="jQuery"><code class="language-javascript">...KETIK CODE jQuery DISINI ....</code></pre>

Silahkan Sobat ganti KETIK CODE CSS,JAVASCRIPT,HTML DISINI dengan kode yang sobat inginkan
Nah itulah cara membuat Syntax Highlighter di postingan blog,semoga artikel ini bisa membantu sobat blogger semua.

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by D2Ubed, Published at Mei 28, 2017 and have 0 komentar