Syntax Higlighter adalah salah satu fitur tampilan atau tampilan tambahan yang digunakan pada blog, website, dan text editor yang memiliki t...
Dengan diadakanya fitur ini pengguna atau pembaca akan lebih nyaman saat penggunaanya. Dan selain mempercantik code atau text pada blog, atau website, pengguna dapat dengan mudah mengenali apa sih jenis kode yang sajikan oleh penulis postingan dalam sebuah blog atau web.
Sebenarnya akan lebih baik jika Syntax Higlighter ini dipasangkan dengan niche blog yang kebanyakan menyajikan postingannya dengan kode-kode pemrogaman atau niche blog terbatas, dan walaupun kurang bagi penggunaan blog niche gado-gado tidaklah salah dalam penggunaan fitur ini. Jadi lebih bijaksanalah dalam penggunaan fitur-fitur tambahan dari pihak ketiga seperti yang satu ini.
Syntax Higlighter ini akan muncul secara otomatis diblogger dengan pemasangan kode menganut langkah-langkah dibawah ini. Mungkin cukup untuk basa-basi diatas. Lanjut untuk peasanganya
1. Pertama sobat login dulu ke blog sobat dan masuk pada halaman admin dari blog sobat.
2. Jika sudah masuk ke bagian tema > edit html
3. Letakan atau paste-kan kode dibawah ini tapat diatas kode ]]></b:skin> atau </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:200px}
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}
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://raw.githubusercontent.com/halim04/syntax/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>5. Save template dan selesai.
Lalu untuk penggunaanya didalam postingan dari blog kita kita buat dulu entri baru untuk postingannya, dan masuk pada kode html nya, untuk penulisan kodenya seperti dibawah ini.
<pre><code> Letakan Kode yang sudah diparse disini </code></pre>Mungkin sekian semoga dapat bermanfaat terimakassih ...
Referensi https://www.bungfrangki.com
Referensi https://www.bungfrangki.com
COMMENTS