Sunday, January 28, 2018

Cara Memasang Pre Seleksi Syntax Highlihter Pada Blogger

Cara Memasang Pre Seleksi Syntax Highlihter Pada Blogger

Tags

Cara Memasang Pre Seleksi Pada Blogger
Pre Seleksi

Hallo sobat blogger kali ini kita akan membahas tentang cara memasang kode pre seleksi syntax highlihter pada template. Tujuanya adalah untuk mempermudah sobat dalam meletakan kode seperti javascript, html, css dan jquery di dalam artikel yang akan sobat posting. Tutorial ini lebih tepat di gunakan oleh sobat yang blog nya membahas seputar tutorial.

Dengan menggunakan kode pre syntax highligter ini pada template maka kode yang akan sobat bagikan pada artikel sobat tidak berantakan. Sederhananya syntax highlighter akan memberikan wadah khusus dengan tag pembungkus di dalam artikel jika sobat ingin membagikan suatu kode seperti javascript, html, css dan jquery. Untuk lebih jelasnya coba perhatikan gambar di atas sebagai contoh penampakan.

Baiklah untuk menggunakan kode tag pembungkus syntax highlighter kita perlu memasang kode berikut ini terlebih dahulu di dalam template sobat. Caranya buka dashboard blogger kemudian pilih template dan edit HTML. Copy kode css di bawah ini dan letakan tepat di atas kode
]]></b:skin>

.hljs{display:block;overflow-x:auto;padding:0.5em;background:#2c3641;color:#fff}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#e67e22;color:#fff;}
#related-post .news-text,#Label2 h2,#PopularPosts1 ul li:nth-child(n+6){display:none}
.BLOG_mobile_video_class{display:none!important;}

Langkah selanjutnya adalah copy kode di bawah ini dan letakan tepat sebelum kode
</body>
penutup template sobat.

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Selanjutnya simpan template sobat dan selesai. Untuk menggunakan kode yang sudah kita pasang tadi di dalam artikel sobat gunakan tag pembungkus berikut ini. Perlu di inggat sebelum sobat menggunakan tag pembungkus ini. Sobat harus memparse terlebih dahulu kode javascript, css, html, dan jquery yang akan sobat bagikan pada artikel sobat. Berikut kode tag pembungkus yang bisa di gunakan.

<pre class='code code-html'><label>HTML</label><code>... kode HTML yang telah diparse di sini ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

<pre class='code code-javascript'><label>JavaScript</label><code>... kode JavaScript di sini ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikianlah sobat cara menggunakan tag pembungkus kode seleksi syntax highligter pada artikel blog kita. Jadi dengan menggunakan pre seleksi syntax highliger ini maka artikel tutorial yang akan kita posting bisa terlihat lebih rapi. Smoga pembahasan ini bisa bermanfaat. Untuk sobat yang masih ragu silahkan tanya pada kolom komentar.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon