Modifikasi Syntax Highlighter Pada Bloquote Blog

Perhatikanlah kode dibawah ini penuh dengan warna-warni, dan pasti anda bertanya dalam hati bagaimana cara membuatnya , ikuti prosedur di bawah ini, karena itu karena code tersebut ditulis berdasarkan class atau tag yang dan  bukan hanya memperindah tetapi mempermudah orang untuk mengedit dan memodifikasi serta mengetahui classnya ol;eh karena itu Syntax higlighter ini merupakan komponen yang sangat penting untuk membuat postingan yang berkaita dengan code HTML, JavaScript, CSS Dll, Pada umumnya syntax highlighter digunakan untuk menuliskan code pada postingan dengan menggunakan class atau tag yang dituliskan secara manual,

• Masuk Blogger
• Pilih template dan Edit HTML
• Masukan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style>

pre code {
    display: block; 
    padding: 10px; 
    background:#141510;
    color: #DCCF8F;
    font-size:85%;
    margin-top: 5px;
    overflow-wrap: break-word; 
    overflow: auto; 
    overflow-x:hidden;
    border-left: 5px solid #9A3135;
}
 
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

• Cari Kode </head> dan pastekan kode dibawah ini tepat di atas kode tadi

<script src='http://cdn.rawgit.com/editorkode/live/master/highlight.pack.js'/>
<script>hljs.initHighlightingOnLoad();</script>

• UntukMengaktifkan tag pre pada komentar silahkan tambahkan diatas kode </body>

<script type='text/javascript'>
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
</script>

• Simpan Template

Cara penggunaan Syntax Highlighter simple dan mudah 

<pre><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>

Pilihan CSS pada Syntax Highlighter ini

Tweet

Ditulis Oleh: wisata pisak at 7:42 PM