Cara Membuat Syntax Highlighter Yang Responsive

highlighter adalah fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

penggunaan fitur ini sangatlah penting untuk para blogger yang membahas mengenai bahasa pemograman dimana menampilkan script pada setiap arikelnya.

dengan menggunakan syntax highlighter  akan memudahkan para pengunjung untuk memahami dan membaca bahasa pemograman yang anda tampilkan.

 nah pada artikel kali ini saya akan membagikan tutorial cara membuat syntax highlighter di blogger kepada anda.

Tampa basa basi lagi  langsung saja simak tutorial berikut

Cara Membuat Syntax Highlighter Yang Responsive

 Tampilan Desktop

Tampilan Mobile

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy dan paste script di bawah 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}

5.lalu klik Simpan Tema

 Cara Menggunakan Syntax Highlighter Di Blogger

untuk menggunakannya cukup mudah 

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

1. Buka postingan Anda
2. Kemudian masuk ke bagian HTML bukan Compose
3. Tulis <pre><code>Masukkan Kode Script Disini</code></pre>

lalu klick pertinjau untuk melihat hasilnya
bagus bukan ?

NB : 

Jika Anda ingin menambahkan kode HTML seperti di atas lebih baik parse dulu kode tersebut menggunakan Tool Parse HTML. karna selain untuk memepercepat loading , memparse code html dapat mencegah tereksekusinya ( jalannya ) script saat di masukkan ke dalam syntax highlighter

Tapi kalau kode css atau javascript Anda tidak perlu melakukan parse terlebih dahulu jika memungkinkan.

Itulah artikel mengenai Cara Membuat Syntax Highlighter Yang Responsive, selamat mencoba dan semoga bermanfaat.

Bagikan Artikel ini