Cara Membuat Syntax Highlighter For Blogger Terbaru

Cara Membuat Syntax Highlighter

Cara Membuat Syntax Highlighter for Blogger atau istilahnya memasang bahasa pemrograman seperti script, juga markup, dalam HTML, CSS, JavaScript dan cara parse.

Sebetulnya ini sangat mudah untuk di lakukan, anda cukup mengikuti tutorial nya di bawah. Tapi sebelum itu, anda harus tau tentang highlighter blogger lebih jauh lagi.

Apa itu Syntax Highlighter

Syntax Highlighter merupakan sebuah fitur dalam proses penempatan istilah bahasa kode pemrograman, script, makrup dalam bentuk tulisan dan warna teks, seperti CSS, HTML dan Javascript.  

{tocify} $title={Daftar Isi}

syntax highlighter blogger memiliki fungsi supaya para pembaca lebih gampang mengenali bentuk kode yang di tampilkan oleh si penulis. Selain itu, crayon syntax highlighter blogger akan menampilkan konten blog anda menjadi lebih profesional.

Keuntungan bagi pengunjung yaitu akan lebih mudah meng copy paste kode yang di tampilkan dalam artikel postingan. Karena kode ini sama dengan cara menggunakan crayon syntax highlighter di WordPress.

Cara Memasang Syntax Highlighter for Blog:

Ikuti langkah-langkah berikut ini untuk memasang google syntax highlighter !

1. Langkah Pertama, Login Blogger di Blogger.com

2. Langkah kedua,Klik Tema” lalu “Edit HTML

3. Langkah Ketiga, Cari kode </head> dan Tempel kode di bawah ini, tepat di atas kode </head> :

Tips! Untuk mempermudah, tekan Ctrl + F lalu ketik kode tersebut di kotak pencarian”. {alertInfo}

<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightpacks.js"/>
<script>hljs.initHighlightingOnLoad();</script>

$ads={1}

4. Langkah keempat, Tempel kode CSS di bawah ini, tepat di atas kode </head>

“Untuk merubah tampilan Teks dan Warna Backgrounnya, ada 6 kode CSS di bawah ini. Silahkan pilih salah satu sesuai keinginan anda !”.

Baca Juga : Cara Membuat (TOC) Table Of Content Otomatis Blogger

POJOAQUE STYLE, atau

<style>
/* POJOAQUE STYLE https://prestisius.blogspot.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>

SOLARIZED DARK, atau

&amp;lt;style&amp;gt;
/* SOLARIZED DARK STYLE https://prestisius.blogspot.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}
&amp;lt;/style&amp;gt;

RAINBOW STYLE, atau

<style>
/* RAINBOW STYLE https://prestisius.blogspot.com/ */
pre::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}
pre::selection{background:#FF5E99;color:#fff;text-shadow:none}
pre code{display:block;padding:0.5em;background:#474949;color:#D1D9E1}
pre .body,pre .collection{color:#D1D9E1}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#969896;font-style:italic}
pre .keyword,pre .clojure .attribute,pre .winutils,pre .javascript .title,pre .addition,pre .css .tag{color:#cc99cc}
pre .number{color:#f99157}
pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#8abeb7}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .identifier{color:#b5bd68}
pre .class .keyword{color:#f2777a}
pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label,pre .id,pre .lisp .title,pre .clojure .title .built_in{color:#ffcc66}
pre .tag .title,pre .rules .property,pre .django .tag .keyword,pre .clojure .title .built_in{font-weight:bold}
pre .attribute,pre .clojure .title{color:#81a2be}
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:#f99157}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
</style>

MONOKAI STYLE, atau

<style>
/* MONOKAI STYLE https://prestisius.blogspot.com/ */
pre code{display:block;padding:0.5em;background:#272822}
pre .tag,pre .tag .title,pre .keyword,pre .literal,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#F92672}
pre code{color:#DDD}
pre code .constant{color:#66D9EF}
pre .class .title{color:white}
pre .attribute,pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#BF79DB}
pre .tag .value,pre .string,pre .subst,pre .title,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#A6E22E}
pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .deletion,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#75715E}
pre .keyword,pre .literal,pre .css .id,pre .phpdoc,pre .title,pre .haskell .type,pre .vbscript .built_in,pre .sql .aggregate,pre .rsl .built_in,pre .smalltalk .class,pre .diff .header,pre .chunk,pre .winutils,pre .bash .variable,pre .apache .tag,pre .tex .special,pre .request,pre .status{font-weight:bold}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}
</style>

TOMMOROW NIGHT BLUE STYLE, atau

<style>
/* TOMMOROW NIGHT BLUE STYLE https://prestisius.blogspot.com/ */
.tomorrow-comment,pre .comment,pre .title{color:#7285b7}
.tomorrow-red,pre .variable,pre .attribute,pre .tag,pre .regexp,pre .ruby .constant,pre .xml .tag .title,pre .xml .pi,pre .xml .doctype,pre .html .doctype,pre .css .id,pre .css .class,pre .css .pseudo{color:#ff9da4}
.tomorrow-orange,pre .number,pre .preprocessor,pre .built_in,pre .literal,pre .params,pre .constant{color:#ffc58f}
.tomorrow-yellow,pre .class,pre .ruby .class .title,pre .css .rules .attribute{color:#ffeead}
.tomorrow-green,pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .cdata{color:#d1f1a9}
.tomorrow-aqua,pre .css .hexcolor{color:#99ffff}
.tomorrow-blue,pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title{color:#bbdaff}
.tomorrow-purple,pre .keyword,pre .javascript .function{color:#ebbbff}
pre code{display:block;background:#002451;color:white;padding:0.5em}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}
</style>

SUNBURST STYLE

<style>
/* SUNBURST STYLE https://prestisius.blogspot.com/ */
pre code{display:block;padding:0.5em;background:#000;color:#f8f8f8}
pre .comment,pre .template_comment,pre .javadoc{color:#aeaeae;font-style:italic}
pre .keyword,pre .ruby .function .keyword,pre .request,pre .status,pre .nginx .title{color:#E28964}
pre .function .keyword,pre .sub .keyword,pre .method,pre .list .title{color:#99CF50}
pre .string,pre .tag .value,pre .cdata,pre .filter .argument,pre .attr_selector,pre .apache .cbracket,pre .date,pre .tex .command{color:#65B042}
pre .subst{color:#DAEFA3}
pre .regexp{color:#E9C062}
pre .title,pre .sub .identifier,pre .pi,pre .tag,pre .tag .keyword,pre .decorator,pre .shebang,pre .prompt{color:#89BDFF}
pre .class .title,pre .haskell .type,pre .smalltalk .class,pre .javadoctag,pre .yardoctag,pre .phpdoc{text-decoration:underline}
pre .symbol,pre .ruby .symbol .string,pre .number{color:#3387CC}
pre .params,pre .variable,pre .clojure .attribute{color:#3E87E3}
pre .css .tag,pre .rules .property,pre .pseudo,pre .tex .special{color:#CDA869}
pre .css .class{color:#9B703F}
pre .rules .keyword{color:#C5AF75}
pre .rules .value{color:#CF6A4C}
pre .css .id{color:#8B98AB}
pre .annotation,pre .apache .sqbracket,pre .nginx .built_in{color:#9B859D}
pre .preprocessor{color:#8996A8}
pre .hexcolor,pre .css .value .number{color:#DD7B3B}
pre .css .function{color:#DAD085}
pre .diff .header,pre .chunk,pre .tex .formula{background-color:#0E2231;color:#F8F8F8;font-style:italic}
pre .diff .change{background-color:#4A410D;color:#F8F8F8}
pre .addition{background-color:#253B22;color:#F8F8F8}
pre .deletion{background-color:#420E09;color:#F8F8F8}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}
</style>

5. Langkah kelima, Klik “Simpan Template” Pemasangan selesai. Nah, untuk menampilkan source code baca penjelasan di bawah !.

Cara Menerapkan Penulisan Syntax Highlighter di Blog

1. Langkah Pertama, Buka Postingan Baru

2. Langkah kedua, Pilih bagian “HTML” bukan di “Compose

3. Langkah ketiga, gunakan kode di bawah ini, untuk mengaktifkan Syntax Highlighter di tulisan.

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

Tambahan, Markup HTML di atas dapat menampilkan kode HTML for blogger, kode Javascrit, kode CSS dan lainnya di dalam postingan anda. Jangan lupa  Parse HTML terlebih dahulu sebelum di tempelkan.

$ads={2}

Cara Parse HTML untuk Syntax Highlighter

Jika postingan kode css atau javascript anda tidak muncul menggunakan cara di atas, sebelum menempelkannya maka Parse kode CSS, Javascript atau HTML yang akan anda gunakan di sini ! 

{getButton} $text={HTML Parse} $icon={NTML Parse} $color={Hex Color}

Keuntungan menggunakan Tools Parse HTML adalah tampilan kode CSS, HTML dan Javascript anda menjadi lebih rapi, tidak berantakan, tidak menyebabkan loading blogger dan enak di pandang. Namun jika tidak menggunakan parse kode juga tidak masalah untuk highlighter blogger.

Penutup

Oke, sampai disini dulu pembahasan tentang blogger syntax highlighter. Semoga dapat bermanfaat untuk anda semua, sampai jumpa di tutorial berikutnya. Terimakasih