√ Cara Membuat Syntax Highlighter Otomatis di Blogger - Satriaryan22

Cara Membuat Syntax Highlighter Otomatis di Blogger

Cara membuat Syntax highlighter otomatis di blogger
Sebelum masuk pada pembahasan artikel tentang cara membuat syntax highlighter otomatis di blogger. Sebelumnya saya akan menjelaskan singkat tentang syntax highlighter 

Apa itu Syntax Highlighter? 

Syntax highlighter ialah sebuah fitur editor teks yang digunakan untuk menyoroti berbagai macam jenis bahasa - bahasa pemrograman, script, atau pun markup, seperti HTML, CSS, JavaScript dan sebagainya.


Fitur ini menampilkan sebuah teks, terutama kode sumber di dalam warna dan font yang berbeda - beda sesuai dengan kategori dari bahasa pemrograman itu sendiri.
Dengan menggunakan syntax highlighting atau penyorotan sintaks ini, bahasa pemrograman lebih mudah dipahami dan lebih mudah dibaca oleh manusia.

Penggunaan syntax highlighter di blogger tentu sangat penting apalagi jika kamu membahas mengenai berbagai macam bahasa pemrograman di blog punya kamu.

Agar manusia lebih mudah memahami dan lebih mudah membaca berbagai jenis baris kode bahasa pemrograman maka akan lebih baik lagi apabila kamu memasang syntax highlighter ini di blog.

Berbagai jenis kode yang kamu bagikan di setiap postingan blog akan berubah menjadi warna-warni sehingga lebih terlihat keren dan rapi.

Selain untuk memudahkan pengunjung situs kamu membaca berbagai jenis kode bahasa pemrograman, penggunaan syntax highlighting ini juga akan lebih membuat visitor nyaman ketika membaca atau melihat kode skrip yang kamu tulis di blog.

Bagi kamu yang tertarik dengan ini dan untuk membuat syntax highlighter di blog punya kamu, silahkan kamu ikuti langkah-langkahnya berikut ini.

Cara Membuat Syntax Highlighter Otomatis di Blogger

1. Kamu Masuk ke Blogger.com
2. Lalu kamu Klik Tema > Edit HTML
3. Silahkan kamu tambahkan kode css berikut ini tepat di atas kode ]]></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 kamu tambahkan lagi kode berikut ini di atas kode </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. Jika sudah, kamu klik Simpan tema


Cara Menggunakan Syntax Highlighter di Blog

Untuk menerapkannya syntax highlighter di blog cukup lebih mudah.

Ketika kamu menulis sebuah postingan baru yang memiliki sebuah kode script dan ingin kode script tersebut terlihat lebih keren dan lebih bagus menggunakan syntax highlighter, caranya yaitu:

1. Buka postingan kamu
2. Kemudian kamu masuk ke mode HTML bukan Compose
3. Tulis <pre><code>Masukkan Kode Script nya Disini</code></pre>
4. Publikasikan dan Lihat hasilnya

Jika kamu ingin menambahkan kode HTML seperti di atas lebih baik parse dulu kode tersebut menggunakan tool Parse HTML.

Tapi jikalau kode css atau pun javascript kamu tidak perlu melakukan parse terlebih dahulu jika memungkinkan.

Itulah artikel saya tentang mengenai cara membuat syntax highlighter otomatis di blogger, selamat mencoba dan semoga bermanfaat.
Buka Komentar
Tutup Komentar

0 Response to "Cara Membuat Syntax Highlighter Otomatis di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel