Cara Membuat Dan Modifikasi Syntax Highlighter Pada Bloquote Blog

detikjam.com - Cara Membuat Dan 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 code HTML, JavaScript, CSS

karena codetersebut ditulis berdasrakan  class atau tag yang dan  bukan hanya memperindah tetapi mempermudah orang untuk mengedit dan memodifikasi serta mengetahui classnya oleh 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,

1. Masuk Blogger
   
2. Pilih template dan Edit HTML
3. 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; }
   
4. 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>
   
   
5. 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>
   
6. Simpan Template
   Cara penggunaan Syntax Highlighter simple dan mudah
   
   <pre><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>
7. Pilihan CSS pada Syntax Highlighter ini