Cara Membuat Syntax Highlighter Otomatis di Blogger
-
Sunday, April 22, 2018
1 Comment
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}
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>Mungkin hanya itu yang bisa saya sampaikan mengenai Cara Membuat Syntax Highlighter Otomatis di Blogger
Masukkan kode di sini
</pre></code>
Sekian dan Terimakasih
Jika kalian menyukai postingan ini, silakan bagikan kepada teman kalian
Wassalamualaikum Wr.Wb
