Syntax highlighter yakni fitur editor teks yang dipakai untuk menyorot banyak sekali jenis bahasa pemrograman, skrip, atau markup, ibarat HTML, CSS, JavaScript dan sebagainya.
Fitur ini menampilkan teks, terutama arahan sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman itu sendiri.
Dengan memakai syntax highlighting atau penyorotan sintaks, bahasa pemrograman lebih gampang dibaca oleh manusia.
Penggunaan syntax highlighter di blogger tentu sangat penting apalagi kalau Anda membahas mengenai banyak sekali macam bahasa pemrograman di blog Anda.
Agar insan lebih gampang memahami dan membaca banyak sekali baris arahan bahasa pemrograman maka akan lebih baik apabila Anda memasang syntax highlighter ini di blog.
Berbagai arahan yang Anda bagikan di postingan blog akan berubah warna-warni sehingga lebih terlihat keren dan rapi.
Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni di Blog
Selain untuk memudahkan pengunjung situs Anda membaca banyak sekali arahan bahasa pemrograman, penggunaan syntax highlighting ini juga akan lebih menciptakan visitor nyaman dikala membaca atau melihat arahan skrip yang Anda tulis di blog.
Bagi Anda yang tertarik untuk menciptakan syntax highlighter ini di blog, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Syntax Highlighter di Blog
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Tambahkan arahan css ini di atas arahan
]]></b:skin> atau </style>/* 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}4. Kemudian tambahkan arahan ini di atas arahan
</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 -->5. Lalu Simpan tema
Catatan:
Anda dapat mengganti warna atau style dari syntax highlighter disini: https://github.com/isagalaev/highlight.js/tree/master/src/styles
Cara Menggunakan Syntax Highlighter di Blog
Untuk menerapkannya di blog cukup mudah.Ketika Anda menulis postingan gres yang mempunyai arahan script dan ingin arahan tersebut terlihat lebih anggun memakai syntax highlighter, caranya yaitu:
1. Buka postingan Anda
2. Kemudian masuk ke bab HTML bukan
3. Tulis
<pre><code>Masukkan Kode Script Disini</code></pre>Contohnya, aku menulis arahan script HTML:
<pre><code><!-- footer nav hidangan --> <div id='footer-navmenu'> <nav id='footer-navmenu-container'> <!-- hidangan navigasi footer start ficri --> <ul> <li><a href='/p/about.html' title='About'>About</a></li> <li><a href='/p/contact.html' title='Contact'>Contact</a></li> <li><a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li> <li><a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy Policy</a></li> </ul> <!-- hidangan navigasi footer end --> </nav> </div> <!-- footer nav hidangan end --></code></pre>
Jika Anda ingin menambahkan arahan HTML ibarat di atas lebih baik parse dulu arahan tersebut memakai tool Parse HTML.
Tapi kalau arahan css atau javascript Anda tidak perlu melaksanakan parse terlebih dahulu kalau memungkinkan.
Itulah artikel mengenai cara menciptakan syntax highlighter di blogger, selamat mencoba dan biar bermanfaat. Sumber https://www.caramanual.com/