Cara Membuat Kotak Syntax Highlighter AMP Dan Non AMP
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'>
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.
3 komentar