Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger dengan Mudah

Syntax Highlighter merupakan sebuah tempat bagi seorang blogger untuk menampilkan beberapa kode program di dalam sebuah artikel yang hendak ia tuliskan di dalam blognya. Nah jika sobat pernah melihat sebuah blog dengan niche tutorial dimana di dalamnya mengandung banyak kode-kode pemrograman pastinya sobat sudah tidak asing lagi dengan Syntax Highlighter itu sendiri. Jika kita perhatikan, umumnya Syntax Highlighter ini memiliki banyak warna atau warna-warni dikarenakan banyak menggunakan javascript. Dan biasanya untuk menggunakan Syntax Highlighter di dalam blogger kita di haruskan untuk memasukannya secara manual. Namun pada kesempatan kali ini saya akan memberikan sebuah tutorial tentang cara membuat syntax highlighter otomatis tanpa javascript di Blogger.

Ya, secara otomatis dan tanpa javascript.

Bisakah min? Ya pertanyaan yang mungkin terbesit di benak sobat-sobat semuanya. Dan akan saya berikan dengan jawaban super mantap, BISA BOS.

Karena pada disini kita akan membuat Syntax Highlighter hanya dengan menggunakan satu warna saja, dengan begitu Syntax Highlighter yang akan kita buat ini tidak membutuhkan javascript sama sekali dan dapat kita buat dengan cara otomatis.

Mas apakah syntax highlighter otomatis di blogger ini tidak memperlambat loading blog?

Pertanyaan bagus. Tidak sobat, karena syntax highlighter yang akan kita buat disini hanya menggunakan kode CSS saja sehingga tidak akan mempengaruhi loading halaman blog yang kita miliki. Dan itulah yang juga menjadikan pembeda syntax highlighter ini dengan syntax highlighter lainnya yang kebanyakan akan berpengaruh terhadap loading blog.

Nah untuk tampilan syntax highlighter yang akan kita buat kali ini silahkan lihat gambar dibawah ini:

Nah sepertinya kita sudah tidak usah berlama-lama lagi. Silahkan sobat langsung saja ikuti tutorial cara membuat syntax highlighter otomatis tanpa javascript di blogger berikut ini:

Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger

• Langkah pertama, silahkan sobat masuk ke akun Blogger sobat masing-masing
• Pilih Tema, lalu pilih Edit HTML
• Kemudian silahkan sobat masukan kode dibawah ini tepat di atas kode </style> atau ]]></b:skin>

/* syntax highlighter Otomatis Tanpa Javascript */
pre {
    padding: .8em 1em;
    margin: 0.5em 0;
    background-color: #20201d;
    border-left: 4px solid #1194f2;
    font-size: 13px;
    color: #fff;
    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: 200px;
}
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: #1194f2;
}
pre code {
    padding: 0!important;
    color: #fff;
    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}

• Pemberitahuan
  
• #1194f2 adalah warna garis disamping Syntax Highlighter
• #20201d adalah kode warna background dari Syntax Highlighter
• #fff adalah kode warna text Syntax Highlighter
• Silahkan sobat ganti kode tersebut dengan kode warna sesuai keinginan sobat, (jika tidak ingin digantikan silahkan biarkan saja)
• Selesai, simpan tema

Cara menggunakan Syntax Highlighter Otomatis

• Buat postingan baru atau edit postingan yang sudah ada
• Masuk ke mode HTML bukan Compose
• Masukan kode berikut ini

<pre><code>
Masukan isi kode yang sudah di parse di sini
</pre></code>

• Setelah selesai silahkan sobat lihat Pratinjau artikel terlebih dahulu, jika dirasa sudah sesuai silahkan sobat klik Simpan kemudian Publikasikan artikel sobat.

Nah demikianlah artikel tentang cara membuat syntax highlighter otomatis tanpa javascript di blogger. Jika ada yang ingin di diskusikan jangan sungkan untuk berdiskusi melalui kolom kometar yang sudah tersedia di akhir artikel.

Terimakasih untuk sobat telah berkunjung ke blog Panduanajib. Semoga artikel yang saya berikan ini dapat memberikan manfaat untuk sobat-sobat Panduanajib semuanya. Salam hormat dari saya untuk sobat semuanya.