Headline
Loading...

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
di 19.42

1 komentar:

Luar Biasa

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top