Cara Membuat Syntax Highlighter di Blog

Hallo teman-teman Teknolopedia, dikesempatan kali ini Teknolopedia bakalan membagikan sebuah tutorial yang berjudul Cara Membuat Syntax Highlighter di Blog, Syntax highlighter adalah fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, script atau markup seperti HTML, CSS, JavaScript.

Lebih tepatnya Syntax Highlighter berfungsi untuk membungkus HTML, CSS, dan JS agar tidak tersebar, dan lebih mudah untuk di Copy oleh orang lain.

Jika kalian tertarik untuk mencobanya langsung saja lihat tutorial dibawah ini.

Cara Membuat Syntax Highlighter di Blog :

1. Buka Dashboard Blogger kalian.
2. Ke Template/Tema => Edit HTML
3. Lalu tambahkan kode CSS dibawah ini tepat diatas kode </style> atau </b:skin>

/* 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:300px}
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. Lalu tambahkan kode dibawah ini tepat di atas kode </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

5. Jika ingin memanggil Syntax Highlighter pakai kode berikut :

<pre><code>
<--- ! Disini Kode Kalian ! --->
</pre></code>

Semoga bermanfaat.

Bagikan Artikel ini