Animekume- Hello gan kembali di animekume kali ini saya akan membagi sebuah tutorial yang mungkin bermanfaat untuk kalian semua yang sedang mencari informasi ini. pada kesempatan kali ini saya akan berbagi tutorial cara membuat syntax highlighter otomatis tanpa javascript di blogger.
"Apakah bisa mas? Tanpa Javascript"
Syntax Highlighter adalah sebuah wadah untuk menampilkan sebuah kode pemrograman. Dimana, syntax highlighter ini sering saya gunakan untuk membuat tutorial-tutorial.
Untuk masalah kecepatan blog kalian tenang saja karena syntax highlighter kali ini hanya menggunakan script CSS. Jadi untuk kecepatan pada blog kalian pasti tidak akan terganggu. Langsung saja di simak ya gan semoga bisa dan bermanfaat untuk kalian yang sedang mencari tutorial kali ini.
 |
| Sumber: tutorialumum.com |
Langkah-Langkah Memasang Syntax Highlighter
1. Langkah pertama, silahkan kalian masuk ke akun Blogger kalian
2. Pilih menu Tema Klik edit HTML
3. Silahkan 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}
1. #1994f2 adalah kode warna garis samping syntax highlighter
2. #20201d adalah kode warna background dari syntax highlighter
3. #fff adalah kode warna syntax highlighter
4. Silahkan ganti warna-warna yang kalian inginkan
5. Jika sudah selesai silahkan Simpan Tema
Cara Menggunakan Syntax Highlighter Otomatis
1. Langkah pertama, masuk ke artikel kamu atau silahkan membuat artikel baru ataupun mengedit artikel yang sudah ada.
2. Jika kalian ingin menambahkan syntax highlighter ini di tengah artikel, silahkan kalian klik ctrl+F pada keyboard, masukan text tersebut pada kotak pencarian halaman yang ingin anda tambahkan Syntax Highlighter
3. Masuk ke tab HTML lalu cari text tersebut, kemudian masukan kode ini di bawah ini setelah text tersebut.
<pre><code>
Masukan kode yang sudah di parse di sini
</pre></code>
4. Silahkan masukan kode html yang sudah di parse di tengah kode tersebut
5. Jika sudah selesai silahkan cek artikel kalian di pertinjauan, jika sudah sesuai kalian tinggal Publikasikan saja.
Demikianlah artikel yang dapat saya tulis hari ini semoga bermanfaat dan membantu anda dalam menyelesaikan masalah sekian dan terimakasih banyak sudah berkunjung.
EmoticonEmoticon