Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Syntax Highlighter di Blogger

Syntax highlighter adalah suatu text editor yang menampung maupun menyoroti penulisan markup kode pada halaman situs agar mempermudah pengunung dalam mengenali keseluruhan kodenya. Biasanya syntax highlighter ini seringkali ditemukan pada blog yang bertemakan tutorial blogger yang dimana pengunjung dapat membedakan mana kode yang berupa CSS, HTML, serta Javascript dengan tulisan biasa.

Cara Membuat Syntax Highlighter di Blogger

Mungkin anda seringkali menemukan syntax highlighter pada situs tertentu yang membuat huruf kode menjadi warna-warni ataupun hanya satu warna. Selain membuat pengunjung mudah memahami struktur kode yang telah anda berikan pada artikel, maka dampak baik selanjutnya adalah artikel maupun blog anda akan terlihat rapi dan terstruktur ketika menggunakan syntax highlighter ini.

Cara Membuat Syntax Highlighter di Blogger

Pada artikel kali ini saya akan memberikan berupa langkah-langkah mengenai cara membuat syntax highlighter dengan mudah tanpa memberatkan loading blog. Berikut adalah langkah-langkah yang wajib anda lakukan.

  • Langkah #1 : Masuk ke akun Blogger anda masing-masing.
  • Langkah #2 : Selanjutnya pilih menu Tema » Edit HTML.
  • Langkah #3 : Lalu cari kode ]]></b:skin> atau </style> kemudian letakkan kode CSS dibawah ini sebelum kode tersebut.
  • /* 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}
  • Langkah #4 : Setelah kode tersebut sudah dipaste, maka langkah selanjutnya anda bisa cari kode </head> dan letakkan kode dibawah ini sebelum kode tersebut.
  • <!-- 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 -->
  • Langkah #5 : Lantas Save template.

Cara Menerapkan Syntax Highlighter di Blogger

Untuk merapkan syntax highlighter pada postingan blog anda, maka anda hanya perlu memasukan kode <pre> dan <pre> untuk memanggil syntax higlighter. Lebih jelasnya anda bisa lihat contohnya dibawah ini.

  Masukkan semua kode CSS, HTML atau Javascript disini

Penting!
Apabila anda ingin memasukan HTML dan Javascript di dalam syntax highlighter, maka sangat disarankan untuk melakukan parse kode terlebih dahulu agar tampilan template anda tidak berantakan. Untuk melakukan parse kode, Anda bisa mengunjungi situs blog


Demikianlah informasi kali ini mengenai cara membuat syntax highlighter yang bisa anda terapkan pada blog anda. Mudah-mudahan dengan adanya artikel ini dapat membantu anda untuk membuat syntax highlighter ini, Selamat mencoba!

Posting Komentar untuk "Cara Membuat Syntax Highlighter di Blogger"

X