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 :

  1. Masuk ke blog masing - masing
  2. Lalu lakukan edit tema / html template blog masing - masing
  3. selanjutya cari tag </head>
  4. 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'/>
      
      
  5. 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

syntax_highlighter

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


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

Post a Comment

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...