Cara Menciptakan Syntax Highlighter Otomatis Tanpa Javascript Di Blogger Dengan Mudah

Syntax Highlighter merupakan sebuah kawasan bagi seorang blogger untuk menampilkan beberapa isyarat kegiatan di dalam sebuah artikel yang hendak ia tuliskan di dalam blognya. Nah kalau teman pernah melihat sebuah blog dengan niche tutorial dimana di dalamnya mengandung banyak kode-kode pemrograman pastinya teman sudah tidak abnormal lagi dengan Syntax Highlighter itu sendiri. Jika kita perhatikan, umumnya Syntax Highlighter ini mempunyai banyak warna atau warna-warni dikarenakan banyak memakai javascript. Dan biasanya untuk menggunakan Syntax Highlighter di dalam blogger kita di haruskan untuk memasukannya secara manual. Namun pada kesempatan kali ini saya akan memperlihatkan sebuah tutorial perihal cara menciptakan 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 tanggapan super mantap, BISA BOS.

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

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

Pertanyaan bagus. Tidak sobat, alasannya yakni syntax highlighter yang akan kita buat disini hanya memakai isyarat CSS saja sehingga tidak akan menghipnotis loading halaman blog yang kita miliki. Dan itulah yang juga mengakibatkan pembeda syntax highlighter ini dengan syntax highlighter lainnya yang kebanyakan akan kuat terhadap loading blog.

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

Nah tampaknya kita sudah tidak usah berlama-lama lagi. Silahkan teman pribadi saja ikuti tutorial cara menciptakan syntax highlighter otomatis tanpa javascript di blogger berikut ini:

Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger

• Langkah pertama, silahkan teman masuk ke akun Blogger teman masing-masing
• Pilih Tema, kemudian pilih Edit HTML
• Kemudian silahkan teman masukan isyarat 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 yakni warna garis disamping Syntax Highlighter
• #20201d yakni isyarat warna background dari Syntax Highlighter
• #fff yakni isyarat warna text Syntax Highlighter
• Silahkan teman ganti isyarat tersebut dengan isyarat warna sesuai cita-cita sobat, (jika tidak ingin digantikan silahkan biarkan saja)
• Selesai, simpan tema

Cara menggunakan Syntax Highlighter Otomatis

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

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

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

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

Terimakasih untuk teman telah berkunjung ke blog . Semoga artikel yang saya berikan ini sanggup memperlihatkan manfaat untuk sobat-sobat semuanya. Salam hormat dari saya untuk teman semuanya.