Cara Membuat Kotak Syntax Highlighter AMP Dan Non AMP

Hai sahabat blogger berjunbe kembali di blog saya ini Disni saya akan membagikan Cara Membuat Kotak Syntax Highlighter AMP Dan Non AMP, baiklah tanpa panjang lebar alangkah baik nya sahabat membaca apa itu Syntax  Highlighter,


Apa itu Syntax  Highlighter ? 

Syntax Highlighter merupakan sebuah text editor yang berfungsi menampilkan teks berupa source code atau markup kode dalam sebuah halaman web, agar pengunjung dapat mengetahui dengan jelas perbedaan antara teks biasa dengan source code.


Cara Memasang Kotak Syntax  Highlighter AMP

Sebelum ke tahap pemasangan nya, alangkah baiknya sahabat memeriksa code .post-body pre dan .post-body pre code 
Jika ada silahkan sahabat hapus .

Selanjutnya sahabat masukan kode dibawah 
Terpat di bawah kode
 <style amp-custom='amp-custom'>


.post-body pre { 
  background: #292E34; /* warna background */ 
  border-left: 5px solid #1d7b8d; /* variasi border kiri */ 
  padding:8px 10px; overflow:scroll; max-height:200px; margin:10px auto; 
} 

.post-body pre code { 
  color: #BFBF90; /* warna huruf */ 
  font-size: 14px; /* ukuran huruf */ 
  line-height: 1.5em; /* tinggi spasi */ 
  font-family:Consolas,Monaco,'Andale Mono',monospace; white-space:nowrap; word-spacing:normal; word-break:normal; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none 
} 

pre::-webkit-scrollbar { 
  background-color: #cacaca; /* warna scroll*/ 
  width: 5px;height: 5px; 
} 

pre::-webkit-scrollbar-thumb { 
  background-color: #6f7a88; /* warna background scroll*/ 
}

Cara Pemasangan Code syntax Highlighter AMP Dan Non AMP


<pre><code> 
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini --> 
</pre></code>

Cara Memasang Kotak Syntax  Highlighter AMP Non AMP

Pemasangan nya pun tidak jauh berbeda, Buka Blogger > Edit Tema.  silahkan copy code dibawah ini palu letakan tepat di atas kode
</b:skin> 


/* 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 tambahkan kode dibawah ini tepat 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 -->

Klik simpan Tema.

Demikian lah postingan tentang Cara Membuat Kotak Syntax Highlighter AMP Dan Non AMP semoga bermanfaat terimakasih.
Jago Design - Teaching is Our Passion