Cara Membuat Syntax Highlighter Blogger

Hallo kali ini aku mau membagikan tutorial yang sangat dibutuhkan dalam dunia desain blogger yaitu Cara Membuat Syntax Highlighter Blogger didalam dunia blogging pasti kamu tau apa itu Syntax Highlighter Blogger, jika yang belum paham mengenai Syntax Highlighter Blogger aku akan menjelaskan nya.

Apa itu Syntax Highlighter Blogger

Syntax Highlighter Blogger merupakan kode yang digunakan untuk menyoroti bahasa pemrograman seperti html, css, javascript, php, vbs, dll, setiap kode yang disoroti akan memiliki style masing-masing sesuai tipe sintaknya masing-masing.

Cara Membuat Syntax Highlighter Blogger 

1. Buka Dashboard Blogger > Tema > Edit HTML

2. Tambahkan kode CSS dibawah ini dan letakan di atas </style>

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
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:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

3. Selanjutnya tambahkan kode dibawah ini dan letakan diatas kode </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

4. Kemudian Simpan Tema

Cara Pengunaan Kode Syntax Highlighter Blogger

Dalam Mode HTML didalam postingan silahkan tulis kode pemanggilan Syntax Highlighter Blogger seperti dibawah ini

<pre><code> Tulis Kode Syntax Highlighter Disini 
</code></pre>

Perlu di ingat saat kamu ingin memasukan kode Syntax Highlighter Blogger kalian wajib memparse terlebih dahulu kalian bisa kunjungi link parse ini parse html

"Jangan Lupa Bagikan Artikel Ini Ya"

Bagikan