Memasang Syntax Highlighter Dipostingan blog

Apa itu Syntax Highlighter adalah buat menyisipkan Kode Dipostingan Blog Sehingga menjadi lebih bagus Tampilannya dan berwarna, Syntax Highlighter ini sudah saya terapkan diblog saya ini Bila ingin lihat Tampilannya ya lihat Aja dibawah ini tampilannya dan bagi yang ingin memasangnya juga diblog anda bisa ikuti tutorial ini

Memasang Syntax Highlighter Diblog

1. Silahkan Login Ke Blogger.com
2. setelah masuk di Homepage blogger Buka Template >> Edit HTML
3. Lalu Letakkan kode dibawah tepat diatas kode]]></b:skin>
   

   /* CSS Syntax Highlighter */
   pre {
       padding: 50px 10px 10px 10px;
       margin: .5em 0;
       white-space: pre;
       word-wrap: break-word;
       overflow: auto;
       background-color: #2c323c;
       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: 'Double click untuk Menyeleksi Semua';
       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;
   }
   
   pre:hover::after {
       opacity: 0;
       top: -8px;
       visibility: visible;
   }
   
   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: #C2C2C2;
   }
   
   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: #DA382B;
   }
   
   code .token.selector,code .token.attr-name,code .token.string {
       color: #88a9ad;
   }
   
   pre code .token.selector,pre code .token.attr-name {
       color: #11CE7E;
   }
   
   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: #0C8CAE;
   }
   
   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;
    border-left: 1px solid #5F5F5F;
    padding-left: 9px;
   }
   
   .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='CSSku']:before {
       background-color: #00a1d6;
   }
   
   pre[data-codetype='HTMLku']:before {
       background-color: #3cc888;
   }
   
   pre[data-codetype='JavaScriptku']:before {
       background-color: #75d6d0;
   }
   
   pre[data-codetype='JQueryku']:before {
       background-color: #e5b460;
   }
   pre code{display:block}=
   pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
   pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
   pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
   pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
   pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
   pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#D94CEA}
   pre .deletion{color:#dc322f}
   pre .tex .formula{background:#073642}
   .comments pre {padding:10px 10px 15px 10px;background:#333;}
   .comments pre::before {content:'Code';font-size:13px;position:relative;top:0;
   background-color:#e25633;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 code {color:#eee;}

4. Kemudian cari kode </head>, dan letakkan kode dibawah tepat diatasnya
   

   <script src='https://sites.google.com/site/fansublogger/javascript/SyntaxHighlighterbyFansublogger.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 src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
   <script>
   hljs.initHighlightingOnLoad();
   </script>

5. Terakhir Simpan Template

Cara Menerapkan Syntax Highlighter

Untuk HTML:

<pre data-codetype="HTMLku" title="HTML"><code class="leangue-markup">Kode Disini</code></pre>

Untuk CSS:

<pre data-codetype="CSSku" title="CSS"><code class="css-markup">Kode Disini</code></pre>

Untuk JavaScript:

<pre data-codetype="JavaScriptku" title="JavaScript"><code class="javascript-markup">Kode Disini</code></pre>

Untuk jQuery:

<pre data-codetype="jQueryku" title="jQuery"><code class="javascript-markup">Kode Disini</code></pre>

Sekian Tutorial Memasang Syntax Highlighter Dipostingan blog Kali ini.Jika ada kesulitan silahkan tanyakan melalui kotak komentar dibawah

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: