Cara Membuat Syntax Highlighter Berwarna di Blog

By Unknown Minggu, 04 November 2018

Share Tweet Share Share Email

UsagiShorten

Pada kesempatan kali ini saya akan membahas tutorial tentang cara membuat syntax highlighter berwarna di blog .
syntax highlighter ini mirip dengan blockquote namun tampilan syntax highlighter ini terlihat lebih rapih dan enak dipandang. syntax highlighter ini banyak digunakan oleh para blogger untuk membungkus suatu kode atau script merekea mulai dari kode CSS, HTML , Java Script, PHP , JQUERY. dan kode lainnya.

Cara membuat syntax highlighter berwarna ini tidaklah sulit , untuk tutorialnya langsung saja , cekidot.

Cara Membuat Syntax Highlighter Berwarna
1. Buka Blogger , Klik Tema , Edit Html.
2. Letakan CSS berikut tepat diatas kode ]]></b:skin> atau diatas kode </style>

 /* CSS Sintax Haighlighter - Alponse */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;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:'</>';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;}
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='HTMLku']:before{background-color:#3cc888;}
pre[data-codetype='CSSku']:before{background-color:#00a1d6;}
pre[data-codetype='JQueryku']:before{background-color:#e5b460;}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0;}
pre[data-codetype='PHPku']:before{background-color:#75d6d0;}
pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#fff;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}} 

3. Setelah itu letakan Jquery dibawah ini tepat diatas kode </body>

  <script src='https://rawgit.com/hilmay619/pribadi/master/sintax.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> <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>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection Highlighter 
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>  

5. Simpan Template

Untuk menggunakanya gunakan HTML dibawah ini didalam postingan mode HTML .

 <pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> ISI KODE </code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> ISI KODE </code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> ISI KODE </code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">  ISI KODE  </code></pre>
<pre data-codetype="PHPku" title="php"><code class="language-javascript"> ISI KODE </code></pre> 

Sebelum mempastekan kode kedalam kotak syntax highlighter ada baiknya sobat parse HTML terlebih dahulu menggunakan tool Parse HTML atau sobat bisa mengunjungi HALAMAN INI .

Nah , begitulah Cara Membuat Syntax Highlighter Berwarna di Blog , semoga tutorial kali ini bermanfaat , sampai berjumpa ditutorial alponse selanjutnya.