Cara Membuat Kotak Code Syntax Berwarna Hanya Css – Tutorial terpilih kali ini mengenai cara membuat Syntax highlighter berwarna hanya dengan css. Kami membuat postingan tentang cara membuat Syntax highlighter di blog karena mungkin ada yang mencari informasi cara membuat Syntax highlighter dengan mudah untuk di pasang di blog.
Tutorial cara membuat Syntax highlighter berwarna hanya dengan css bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk membuat Syntax highlighter berwarna hanya perlu copy paste dari postingan ini. Tanpa basa basi berikut tutorial cara memasang yntax highlighter berwarna hanya dengan css.
Membuat Syntax highlighter berwarna
Seperti biasa sebelum menerapkan kode Membuat Syntax highlighter di blog, alangkah baiknya berjaga-jaga kalau terjadi kesalahan dengan membuat “Cadangan Template”. Lalu pada “edit html” salin kode CSS Syntax highlighter di bawah ini dan letakkan tepat di atas kode ]]></b:skin>
CSS Syntax highlighter berwarna
Silahkan copas code CSS Syntax highlighter berikut dan letakkan di atas kode ]]></b:skin>
.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-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}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.post-body pre:before{content:'</>';position:absolute;right:0;color:#c5c8c6;font-size:10px;padding:20px 15px;z-index:2;line-height:35px}
.post-body pre.html:before{content:'.html'}
.post-body pre.css:before{content:'.css'}
.post-body pre.js:before{content:'.js'}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
mark{padding:1px 6px;border-radius:2px;font-family:'Fira Mono', monospace;font-size: 15px}
code mark{font-size: 13px;margin: 2px;display: inline-block;}
pre code mark{font-size: 13px;margin: 2px;display: inline-block;}
Jika CSS Syntax highlighter sudah tepat di letakkan di atas ]]></b:skin> silakan klik simpan. Selanjutkan menerapkan di “html” blog. Berikut ini kode html Syntax highlighter untuk di terapkan di blog.
HTML Syntax highlighter berwarna
Penerapan Kode html Syntax highlighter dalam postingan blog. Caranya silahkan copas kode di bawah ini lalu letakan dalam postingan pada “mod html”. Ingat ya! Dalam “mod html”. Di bawah ini kode dan contoh penerapan di dalam postingan blog.
<pre class='html'><code>untuk kode jenis html</code></pre><pre class='css'><code>untuk kode jenis css</code></pre><pre class='js'><code>untuk kode jenis javascript</code></pre>Demikian tadi cara membuat Syntax highlighter berwarna hanya dengan css. Untuk demo Syntax Highlighter Berwarna Dengan CSS bisa mengunjungi tautan ini Demo Syntax Highlighter Berwarna Dengan CSS
Terimakasih sudah membaca artikel kami tentang cara membuat Syntax highlighter berwarna hanya dengan css. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang cara membuat syntax highlighter, Cara Membuat Syntax Highlighter Warna Warni Di Blogger, Cara Memasang Syntax Highlighter Keren dan Berwarna, Cara Membuat Syntax Highlighter di Blogger Terbaru, Cara Membuat Syntax Highlighter Berwarna + Tombol Copy. Smoga bermanfaat..
