Syntax highlighter ialah fitur editor teks yang dipakai untuk menyorot aneka macam jenis bahasa pemrograman, skrip, atau markup, ibarat HTML, CSS, JavaScript dan sebagainya.
Fitur ini menampilkan teks, terutama aba-aba 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 jikalau Anda membahas mengenai aneka macam macam bahasa pemrograman di blog Anda.
Agar insan lebih gampang memahami dan membaca aneka macam baris aba-aba bahasa pemrograman maka akan lebih baik apabila Anda memasang syntax highlighter ini di blog.
Berbagai aba-aba 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 aneka macam aba-aba bahasa pemrograman, penggunaan syntax highlighting ini juga akan lebih menciptakan visitor nyaman saat membaca atau melihat aba-aba 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 aba-aba css ini di atas aba-aba
]]></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 .j4vadoc{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 aba-aba ini di atas aba-aba
</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 aba-aba script dan ingin aba-aba tersebut terlihat lebih cantik 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 aba-aba script HTML:
<pre><code><!-- footer nav sajian --> <div id='footer-navmenu'> <nav id='footer-navmenu-container'> <!-- sajian 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> <!-- sajian navigasi footer end --> </nav> </div> <!-- footer nav sajian end --></code></pre>
Jika Anda ingin menambahkan aba-aba HTML ibarat di atas lebih baik parse dulu aba-aba tersebut memakai tool Parse HTML.
Tapi kalau aba-aba css atau j4vascript Anda tidak perlu melaksanakan parse terlebih dahulu jikalau memungkinkan.
Itulah artikel mengenai cara menciptakan syntax highlighter di blogger, selamat mencoba dan agar bermanfaat.
Sumber http://www.caramanual.com