6. Cara Membuat dan Menggunakan Syntax Highlighter di Blogger
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.
Syntax Highlighter adalah fitur editor teks yang digunakan untuk pemrograman, skrip, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam warna dan font yang berbeda sesuai dengan kategori istilah.
Fitur Syntax Highlighter memfasilitasi penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup karena kesalahan struktur dan sintaks secara visual berbeda.
Fitur Syntax Highlighter juga digunakan dalam banyak konteks terkait pemrograman (seperti manual pemrograman), baik dalam bentuk buku berwarna atau situs web online untuk mempermudah pemahaman cuplikan kode bagi pembaca. Menyoroti tidak memengaruhi makna teks itu sendiri; ini dimaksudkan hanya untuk pembaca manusia.
Syntax Highlighter adalah bentuk notasi sekunder, karena penyorotan bukan bagian dari makna teks, tetapi berfungsi untuk memperkuatnya. Beberapa editor juga mengintegrasikan penyorotan sintaks dengan fitur lain, seperti pemeriksaan ejaan atau pelipatan kode, sebagai bantuan untuk pengeditan yang berada di luar bahasa.
Syntax Highlighter
Kebanyakan editor dengan penyorotan sintaks memungkinkan warna dan gaya teks berbeda untuk diberikan ke lusinan sub-elemen leksikal Syntax yang berbeda. Ini termasuk kata kunci, komentar, pernyataan aliran kontrol, variabel, dan elemen lainnya. Pemrogram sering kali menyesuaikan setelannya secara besar-besaran dalam upaya menampilkan informasi berguna sebanyak mungkin tanpa membuat kode sulit dibaca.
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
Salin / Copy CSS Syntax Highlighter Night sebagai Berikut.
[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.
Simpan tema Anda dan selesai Memasang CSS dan JavaScript Syntax Highlighter.
Lanjut ke tahap berikutnya?
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.