Anda mungkin sering melihat dan menemukan kotak yang berisikan kode teks editor saat membaca sebuah artikel yang berisikan tentang tutorial blogging.
Jenis kode teks atau skrip pemrograman tersebut dikenal atau sering disebut juga dengan Syntax Highlighter. Sebuah teks editor pemrograman yang berfungsi untuk menempatkan berbagai jenis bahasa pemrograman atau skrip, seperti; HTML, CSS, JavaScript dan lain-lain.
Berbeda dengan blockquote, editor teks yang satu ini memiliki warna dan font yang berbeda. Tujuannya adalah agar pembaca artikel dapat membedakan antara teks biasa dan bahasa pemrograman yang di tampilkan sehingga lebih mudah dipahami.
Ditambah lagi, kode atau skrip yang ada didalam kotak akan lebih mudah disalin atau paste di tempat editor lain.
Bagi Anda yang tertarik untuk memasang syntax Highlighter di blog ataupun website, bisa menyimak cara dan langkah-langkahnya dibawah ini.
Cara membuat Syntax Highlighter di Blogger
1. Langkah pertama. Masuk dashboard blogger.
2. Klik menu > Tema > Edit HTML
3. Pilih blog/postingan yang ingin Anda tambahkan kotak editor ini.
4. Salin kode CSS dibawah ini, pastekan tepat 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: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}
5. Tambahkan kode berikut sebelum 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 –>
Jika Anda memahami kode diatas, Anda bisa membuat kotak editor atau style lainnya dengan warna yang berbeda disini.
Cara memasang syntax highlighter di postingan blogger
Sampai disini, tugas Anda belum selesai. Karena syntax highlighter tidak akan muncul secara otomatis, melainkan Anda harus melakukannya secara manual.
Berikut cara dan langkah-langkahnya:
- Buat entri baru, tulis artikel hingga selesai.
- Siapkan kode atau skrip yang sudah Anda salin sebelumnya atau yang ingin Anda sisipkan.
- Kemudian masuk menu tampilan dalam mode HTML, gunakan kode berikut <pre><code> Kode di sini </code></pre>
- Terakhir simpan template
Demikian artikel mengenai fungsi syntax highlighter, cara memasangnya di postingan blog dan penerapannya di blogger.
Post a Comment