Syntax Highlighter Mudah digunakan, Syntax Highlighter yang memberi Anda kemampuan untuk dengan mudah dan aman menyematkan kode sumber yang disorot sintaks di dalam halaman dan posting di situs Web Anda tanpa kehilangan formatnya.
Fitur Syntax Highlighter memfasilitasi penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup karena kesalahan struktur dan sintaks secara visual berbeda.
Syntax Highlighter
6. Cara Membuat dan Menggunakan Syntax Highlighter di Blogger.
1. Memasang CSS Syntax Highlighter Night
- Masuk ke blogger Anda
- Perhatikan gambar sebagai berikut
2. CSS Syntax Highlighter Night
[code type="CSS"] <style type='text/css'> /* CSS Syntax Highlighter Night */ pre, code{font-family:"Courier New", Courier, Monospace;color:inherit;} code{padding:1.2em;} pre{background-color:#f1f1f1;margin:7px;width:98%;padding:0;white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;padding:0;line-height:1.4em;position:relative;} pre::before{content:"• • • ";padding:5px;color:#fff;display:block;background:#0070c0 none repeat scroll 0% 0%;font-family:Inconsolata;font-size:26px;font-weight:bold;text-indent:18px;} .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px;} .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.hljs-attr, mark.hljs-string, mark.hljs-bullet{background-color:#e67e22;color:#fff;} .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px;} .hljs mark span.hljs-number,.hljs mark span.hljs-comment,.hljs mark span.hljs-symbol,.hljs mark span.hljs-string,.hljs mark span.hljs-attr,.hljs mark span.hljs-keyword,.hljs mark span.hljs-name,.hljs mark span.hljs-tag{color:#fff;margin:0.15rem 0;} </style> [/code]
3. Pasang CSS Syntax Highlighter Night
Cari Kede </head> dengan cara tekan CTRL + F dan masukan kode </head> ke kotak pencarian Tags.
Jika sudah letakan CSS tepat di atas kode </head> Seperti contoh di gambar berikut.
Simpan Tema Anda.
4. Memasang JavaScript Syntax Highlighter Night
Salin / Copy JavaScript Syntax Highlighter Night sebagai Berikut.
[code type="JavaScript"] <b:if cond='data:view.isPost'> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all"; }); } loadCSS( "//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/sunburst.min.css" ); hljs.initHighlightingOnLoad(); hljs.configure({ useBR: false }); $("div.code").each(function (e, t) { hljs.highlightBlock(t); }); //]]> </script> </b:if> [/code]
Lalu cari kode </body> dengan cara tekan CTRL + F dan masukan </body> di kotak pencarian Tags.
Setelah ditemukan letakan Java Script tersebet tepat di atas </body>. Seperti contoh gambar berikut.5. Cara menggunakan Syntax Highlighter Night di Postingan Blogger
- Buat postingan baru
- Lalu klik ✎ pilih < >
- Masukan Kode seperti di gambar berikut.
6. Pasang kode Syntax Highlighter Night di Postingan Blogger
Cara menggunakan Syntax Highlighter sangat mudah. Hanya perlu menggunakan kode dengan tags <pre> dan <code>. Untuk penyusunan Salin / Copy Kode dibawah lalu pasang di Postingan blogger HTML Anda.
[code type="HTML"] <pre><code> // Isi Kode JavaScript, jQuery atau Kode CSS dan Kode HTML disini... // </code></pre>[/code]Hapus Teks
//
Isi Kode JavaScript, jQuery atau Kode CSS dan Kode HTML disini...
//
Lalu ganti dengan code HTML, CSS, JavaScript, JQuery, dan lain sebagainya.
Selesai dan Publikasikan Postingan Anda. Lihat hasilnya.....
Posting Komentar
Again, this is mainly in the versions that are not polished. The contrast that is most helpful ti element is what occurs when your case will get scratched and when your sapphire crystal will get a nick. By contrast, titanium is thought for its rather dull and muted gray color. Conventional knowledge lengthy had it that producing titanium watches in an array of colours was troublesome, if not downright inconceivable. Duratect, CITIZEN’s proprietary surface-hardening know-how, modified everything, finally making a rich range of colours potential.