6. Cara Membuat dan Menggunakan Syntax Highlighter di Blogger

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.

Berikut Tahap demi tahap :

6. Cara Membuat dan Menggunakan Syntax Highlighter di Blogger.


1. Memasang CSS Syntax Highlighter Night

  • Masuk ke blogger Anda
  • Perhatikan gambar sebagai berikut
Syntax Highlighter


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.

JavaScript Syntax Highlighter

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.
Syntax Highlighter

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.....

Post a Comment

[facebook]

MKRdezign

{facebook#YOUR_SOCIAL_PROFILE_URL} {twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Kontak

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget