Cara membuat Syntax Highlighter di blog Blogger
Fitur ini menampilkan teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman itu sendiri.
Syntax highlighter adalah fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.
Berikut manfaatnya :
1. Selain untuk memudahkan pengunjung situs Anda membaca berbagai kode bahasa pemrograman, penggunaan syntax highlighting ini juga akan lebih membuat visitor nyaman ketika membaca atau melihat kode skrip yang Anda tulis di blog.
2. Agar manusia lebih mudah memahami dan membaca berbagai baris kode bahasa pemrograman maka akan lebih baik apabila Anda memasang syntax highlighter ini di blog.
3. Ketika Anda menulis postingan baru yang memiliki kode script dan ingin membagikannya kepada pengunjung biar supaya kode tersebut terlihat lebih bagus ya.. menggunakan syntax highlighter tentunya.
Baiklah.. tertarik untuk membuat syntax highlighter ini di blog?..
Ikuti langkah-langkahnya di bawah ini :
Cara Membuat Syntax Highlighter di Blog
- Masuk ke Blogger.com
- Klik Tema > Edit HTML
- Tempelkan kode css ini di atas 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}
- Tambahkan kode ini 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 -->
- Lalu Simpan tema
Untuk menggunakan Syntax Highlighter nya dipostingan anda perlu memanggilnya di dalam mode html bukan compose menggunakan kode di bawah ini, dengan begitu kode-kode yang anda masukan di dalam artikel akan di kemas dengan sebuah kotak atau bisa juga di sebut dengan bingkai.
<pre><code>
Simpan Kode JavaScript, jQuery atau CSS disini
</pre></code>selamat mencoba dan semoga bermanfaat.
Post a Comment for "Cara membuat Syntax Highlighter di blog Blogger"