MASIGNASUKAv102
4922683097822459718

Cara Membuat Syntax Highlighter Keren Pada Blogger

Cara Membuat Syntax Highlighter Keren Pada Blogger
Add Comments
12/25/2020

Hai semua, kali ini saya akan membagikan tutorial yang cukup menarik buat kalian. kita bakal membuat Syntax Highlighter keren untuk blogger ya teman-teman. Apa itu Syntax Highlighter? sebelum kita mulai saya akan jelasin sedikit tentang apa itu Syntax Highlighter?

Syntax Highlighter merupakan sebuah fitur khsusus untuk proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada kode bahasa pemrograman untuk dipindahkan maupun di copas kedalam bentuk tulisan lain supaya kita lebih mudah dalam membaca atau mempelajarinya.

Nah itu dia teman-teman kurang lebih penjelasan sinkat tentang apa itu Syntax Highlighter. 

Langsung saja kita ke tutorialnya ya teman-teman.

1. Login Blogger > Template > Klik Edit HTML 

2. Letakan kode dibawah ini tepat diatas </head> kemudian simpan 

3. Letakan kode dibawah ini tepat diatas </head> kemudian simpan

<style>
/* POJOAQUE STYLE www.omjuan.com */
pre code{display:block;padding:0.5em;color:#DCCF8F;background:url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914}
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}
</style>

Atau

<style>
/* SOLARIZED DARK STYLE www.omjuan.com */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
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{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
</style>

4. Jika sudah memasang style atau tema Syntax Highlighter yang kalian suka pada template kalian, silahkan simpan/save template kalian.

Cara Penggunaan Syntax Highlighter

Silahkan kalian gunakan markup HTML di bawah ini mengaktifkan Syntax Highlighter pada saat kalian ingin menampilkan source code kalian, seperti : HTML, CSS, JAVASCRIPT, PHP dan markup HTML pada postingan kalian.

<pre><code>
Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini
</code></pre>

Oke teman-teman, kurang lebih begitu untuk tutorial kita kali ini tentang Cara Membuat Syntax Highlighter Keren Pada Blogger, terimakasih.

Untuk tutorial videonya menyusul ya teman-teman.

OMJUAN.COM

Situs penyedia tutorial programming online.