Syntax Highlighter Blogspot Dengan Gaya Sublime text

Syntax Higlighter umum digunakan sebagai gaya pada saat seseorang menuliskan atau membagikan kode pada halaman website/blog. Dengan menggunakan Syntax Highlighter kode yang digunakan akan lebih baik atau rapih.

Saya sendiri menggunakan Syntax Highlighter dari [ https://highlightjs.org/ ] untuk membagikan kode - kode seperti css, html, php, mysql pada blog. Syntax Highlighter juga memiliki berbagai varian tema atau warna theme untuk tampilan dari kode yang kita tulis. Anda dapat melihat varian / template css untuk gaya highlighter anda pada halaman [ https://cdnout.com/cdn/highlight.js@11.5.0/ ]

Untuk menambahkan syntax highlighter dengan gaya sublime text, Anda dapat mengikuti langkah - langkah berikut :

Masuk ke blog masing - masing
Lalu lakukan edit tema / html template blog masing - masing
selanjutya cari tag </head>

Taruh kode berikut diatas tag </head>

  
  <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/monokai-sublime.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js'/>

Terakhir tambahkan css pada barisan css yang terdapat pada template blog Anda masing - masing dengan kode seperti berikut

  
  /* syntax highlighter ROOT93 */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#393636;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}

Hasil dari syntax highlighter dengan gaya sublime text akan terlihat seperti berikut

Dokumentasi lengkap tentang highlightjs bisa Anda lihat pada halaman [ https://highlightjs.org/ ]

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Syntax Highlighter Blogspot Dengan Gaya Sublime text

0 Response to "Syntax Highlighter Blogspot Dengan Gaya Sublime text"

Post a Comment