Cara Membuat Syntax Highlighter Pada Blogger

Cara Membuat Syntak Highlighter Pada Blogger

Cara Membuat dan Pasang Syntax Highlighter Pada Blogspot.


Syntax Highlighter adalah fitur editor teks  untuk menampilkan berbagai jenis bahasa pemrograman, skrip atau markup, seperti HTML, CSS, JavaScript dan lainnya.

Dengan menggunakan Syntax Highlighting atau biasa disebut penyorotan sintaks, bahasa pemrograman akan lebih mudah dibaca oleh manusia.

Jika kalian seorang blogger Syntax Highlighter sering sekali digunakan apalagi pembahasan pada blog kalian mengenai bahasa pemrograman dan kode-kode HTML lainya, Syntax juga berfungsi untuk merapikan kode Html & Bahasa Pemrograman agar enak lihat dan rapih.

Bagi kalian yang tertarik untuk membuat Syntax Highlighter pada blog, kalian bisa ikuti tutorial yang saya bagikan pada kesempatan kali ini.

Cara Pasang Syntax Pada Blogger.



  • Pertama silakan kalian masuk terlebih dahulu pada blognya masing-masing lalu masuk pada bagain Tema => Edit Html.
  • Cari kode </style> lalu letakkan kode dibawah ini tepat diatas kode </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}
 

  • Lalu masukan kode dibawah ini tepat diatas 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 --> 

  • Simpan tema.
Nah diatas adalah cara pemasangan kode syntax pada template/blog kalian, sampai disini cara pemasang syntax sudah berhasil, selanjutnya cara penulisan Syntax.

Cara Penulisan Syntax Highlighter Pada Blog.

Cara Penulisan cukup mudah kalian hanya tinggal memanggil kode tersebut dengan kode <pre><code> disni kode html </code></pre>, atau lebih detail berikut ini.

  • Masuk pada blognya masing-masing
  • Entri Baru (menulis artikel) nah jika kalian ingin menggunakan Syntax Highlighter, kalian ubah kode penulisannya ke HTML bukan Compose.
  • Tulis kode <pre><code> KODE HTML,SCRIPT, JAVASCRIPT DLL, TULIS DISINI </code></pre>
Sebagai contoh saya menulis kode syntak:


Note!!!


Untuk kode HTML seperti Css & JavaScript anda tidak perlu parse, jika kode selain Css & JavaScript kalian harus parse terlebih dahulu Disini.

Ok demikian tutorial saya kali ini tentang Cara Membuat Syntax Highlighter Pada Blogger, semoga bisa membantu kalian semua.

0 Response to "Cara Membuat Syntax Highlighter Pada Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel