Cara Membuat Syntax Highlighter di Blog

Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman.
Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Di sini Saya akan menjelaskan tentang Syntax Highlighter.

Pengertian Syntax Highlighter

Syntax Highlighter adalah fitur khusus dari sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, dan posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk di pindahkan maupun di copy paste ke dalam bentuk tulisan lain supaya lebih mudah dalam membaca atau mempelajarinya.

Syntax Highlighter hampir sama persis dengan fitur Blockquote akan tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual.
Jadi intinya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Selain mempercantik tampilan barisan kode dalam postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenal jenis kode yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Di sini saya akan berikan tutorialnya beserta desain atau css style untuk backgroundnya.

Cara Membuat Syntax Highlighter pada Blog

1. Login Bligger > Template > Klik Edit HTML

2. Simpan kode di bawah ini sebelum kode </head>

<script src="https://cdn.rawgit.com/Arlina-Design/frame/0c5e9584/highlightpacks.js"/>
<script>hljs.initHighlightingOnLoad();</script>

3. Simpan kode di bawah ini sebelum kode </style>

Pilih salah satu kode CSS di bawah ini yang anda sukai warna backgroundnya maupun teksnya

/* POJOAQUE STYLE  */
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}

Atau

/* SOLARIZED DARK STYLE  */
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}

Atau

/* RAINBOW STYLE  */
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}

Atau

/* MONOKAI STYLE  */
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}

Atau

/* TOMMOROW NIGHT BLUE STYLE  */
.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}

Atau

/* SUNBURST STYLE  */
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}

Atau

/* syntax highlighter Otomatis */
 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. Bila sudah memasang style atau tema syntax highlighter yang anda inginkan pada template anda, sekarang klik save template anda.

Cara Penulisan Syntax Highlighter

Gunakan markup HTML di bawah ini untuk mengaktifkan Syntax Highlighter pada saat anda ingin menampilkan source code, seperti kode Javascript, CSS, dan markup HTML pada postingan anda.

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

Source :
https://www.arlinadzgn.com/2015/05/cara-membuat-syntax-highlighter-di-blog.html
https://www.bungfrangki.com/2015/07/membuat-syntax-highlighter-otomatis-di-blogger.html

Share this post