Cara Membuat Syntax Highlighter Otomatis di Blogger

Cara Membuat Syntax Highlighter Otomatis di Blogger

Assalamualaikum Wr.Wb
Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna warni. Kode warna warni tersebut bisa kita lihat pada konten yg kebanyakan, konten tutorial

Baiklah saya akan langsung memberikan tutorial ini secara gratis

Tutorial Syntax Highlihter kali ini sangat berbeda dari yang lain, dikarenakan Syntax yang saya buat ini tidak menggunakan Javascript

Sebelum mencoba tutorial ini, Berdoa dulu gan biar work

Langsung saja kita mulai

Cara Membuat Syntax Highlighter Otomatis di Blogger

1. Masuk ke dalam Template kalian
2. Copykan kode di bawah ini

/* 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}

Jika kalian ingin mengedit warna di atas silakan sesuaikan dengan Blog kalian masing masing
3. Letakkan kode di atas pada bagian </Style> atau ] ] ></b:skin>

4. Jika sudah simpan template kalian

Selamat Syntax Highlighter Otomatis kalian sudah jadi

Cara menggunakan Syntax Highlighter di Blogger

Cara menggunakan script ini sangatlah mudah
Pada saat kalian membuat sebuah postingan > Pergi ke HTML dan masukkan kode di bawah ini

<pre><code>
Masukkan kode di sini
</pre></code>

Mungkin hanya itu yang bisa saya sampaikan mengenai Cara Membuat Syntax Highlighter Otomatis di Blogger

Sekian dan Terimakasih
Jika kalian menyukai postingan ini, silakan bagikan kepada teman kalian
Wassalamualaikum Wr.Wb