Cara Membuat Syntax Hightlighter Otomatis Diblog Tanpa Javascript

Syntax Hightlighter Adalah kode yang digunakan untuk meletakkan script Html, JavaScript, JQuery, dan kode lain sebagainya agar tampil warna warni didalam sebuah artikel yagg berisi konten mengenai tutorial dan tps trik blogger maupun programer.

kenapa bisa otomatis ? 

karena jika kita memasang kode ini tidak perlu mengunakan java script hanya perlu menggunakan 2 kode satu berperan css dan satu lagi sebagai tempat kode ditampilkan, dengan menggunakan kode ini blog anda akan terlihat profesional dan nyaman saat dilihat.

Baca Juga : Cara Membuat Form Parse Html Diblog

Syntax Hightlighter ini sebagai pengganti block quote yang mana memiliki kekurangan tidak menghasilkan tampilan warna warni pada source kod sudah tersedia pada menu penulisan artikel blog dan dengan alasan itulah banyak memilih Syntax Hightlighter.

Baca Juga : Cara Agar Artikel Tidak Bisa Dicopas

Syntax Hightlighter banyak digunakan oleh blogger karena ringan dan tidak mempengaruhi kecepatan blog anda, anda penasaran bagaimana hasil yang ditampilkan untuk itu ikutilah langkahnya dibawah ini :

Langkah - Langkah  Membuat Syntax Hightlighter Otomatis

1. login akun blogger
2. Tema pilih Edit Html
3. kemudian anda copy kode dibawah ini dan letakkan tepat diatas 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}

note :

• #1194f2 adalah sebagai kode warna garis bagian samping dari Syntax Hightlighter.
• #20201d adalah sebagai kode warna background dari Syntax Hightlighter.
• #fff adalah sebagai kode warna text dari Syntax Hightlighter.
• anda bisa mengganti kode tersebut sesuka anda.

Cara Menggunakan Syntax Hightlighter

1. masuk kedalam artikel baru yang anda buat.
2. pilih tab HTML dan masukkan kode dibawah ini dibagian artikel.

<pre><code>

Masukan kode yang sudah di parse di sini

</pre></code>

3. selanjutnya kita parse terlebih dahulu kode yang akan dimasukkan Syntax Hightlighter, jika belum bisa parsekan disini.
4. copy kode hasil pasrse dan pastekan kodenya di "masukan kode yang sudah diparse di sini"
5. kemudian simpan/pratinjau dan lihat hasilnya.

Baca Juga : Cara Optimasi Seo Pada Gambar

perlu anda ketahui didalam Syntax Hightlighter ini tidak hanya untuk kode, anda bisa mengisi dengan kata kata dan tulisan juga. selamat mencoba dan jangan lupa hadir kembali untuk update artikel hanya di itseeboy.

WASSALAM

Share this post