Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger

Syntax Highlighter adalah sebuah wadah untuk menampilkan sebuah kode pemograman. Dimana, syntax highlighter ini sering di gunakan untuk membuat sebuah tutorial di sebuah situs web.Syntax highlighter umumnya berwarna-warni, karena menggunakan banyak javascript, namun pada tutorial kali ini, saya akan membagikan tutorial tentang cara membuat syntax highlighter otomatis tanpa javascript di blogger.

Wow tanpa javascript? Emang bisa?

Karena syntax highlighter ini hanya menggunakan satu warna saja, jadi syntax highlighter ini tidak memerlukan javascript. Untuk memanggil syntax highlighter ini, agan hanya cukup menggunakan 2 script saja, karena itulah di sebut otomatis.

(Baca juga : Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger)

Mengenai syntax highlighter yang bisa mengurangi kecepatan blog agan, agan tidak perlu takut karena syntax highlighter ini hanya menggunakan script CSS saja. Itulah bedanya syntax highlighter ini dengan syntax highlighter yang lainnya.

Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger

Untuk tampilannya seperti ini, agan sis juga bisa mengatur warnanya pada CSS yang sudah di berikan pada tutorial saya.

Cara Membuat Syntax Highlighter Otomatis Terbaru di Blogger

Langsung saja untuk cara memasang syntax highlighter otomatis tanpa javascript, silahkan ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Syntax Highlighter Otomatis Tanpa Javascript di Blogger

Langkah pertama, silahkan masuk ke akun Blogger agan
Pilih menu Tema, klik Edit HTML
Kemudian masukan script di bawah 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}

Pengaturan :

#1194f2 adalah kode warna garis di samping syntax highlighter.
#20201d adalah kode warna background dari syntax highlighter.
#fff adalah kode warna text syntax highlighter.
Silahkan ganti warna-warna tersebut sesuai keinginan agan.

Setelah selesai mengatur, pilih Simpan tema.

Cara Menggunakan Syntax Highlighter Otomatis

Langkah pertama masuk artikel agan, silahkan membuat artikel baru ataupun mengedit artikel yang lama
Jika agan ingin menambahkan syntax highlighter ini di tengah artikel, silahkan agan klik Ctrl + F pada keyboard, kemudian masukan text tersebut di kotak pencarian halaman
Masuk ke tab HTML, lalu cari text tersebut, kemudian masukan kode di bawah ini tepat setelah text tersebut

<pre><code>

Masukan kode yang sudah di parse di sini

</pre></code>

Silahkan masukan kode yang sudah di parse di tengah kode tersebut, untuk memparse kode, silahkan masuk ke halaman Parse HTML Tools
Setelah selesai, silahkan lihat Pratinjau, jika sudah sesuai keinginan pilih Simpan kemudian Publikasikan.

Demikian tutorial dari saya mengenai cara membuat syntax highlighter otomatis tanpa javascript di blogger. Jika ada pertanyaan mengenai cara memasangnya, silahkan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel tadi bermanfaat untuk agan atau sis. Untuk tutorial yang lainnya mengenai tutorial blogging dan sebagainya, silahkan tetap kunjungi blog Tutorial Umum.

Cari Blog Ini