Iklan Billboard 970x250

Cara Memasang Syntax Highlighter Pada Blogger atau Website

Cara Memasang Syntax Highlighter Pada Blogger atau Website

Syntax Higlighter adalah salah satu fitur tampilan atau tampilan tambahan yang digunakan pada blog, website, dan text editor yang memiliki tujuan untuk mempercantik tampilan dengan menampilkan text atau Source code pada blog, website, dan text editor dalam berbagai warna sesuai tema yang digunakannya. Fitur ini sangan mempermudah penggunanyaa dalam penulisan bahasa-bahasa pemrogaman seperti HTML, CSS JavaScript, PHP, dan masih banyak lagi.

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}
4. jika sudah cari kode dan temukan </body> dan letakan lagi kode dibawah ini tepat diatasnya.
<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>
Untuk parse kode bias dilihat di Kode Parser
Mungkin sekian semoga dapat bermanfaat terimakassih ...
Referensi https://www.bungfrangki.com
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Iklan Tengah Post

get more nice stuff
in your inbox

instantly by Subscribing to us. So you will get email everytime we post something new here

Contact Form

Name

Email *

Message *