Cara Membuat Syntax Highlighter Tanpa Javascript - NBajul

Cara Membuat Syntax Highlighter Tanpa Javascript

Syntax Highlighter adalah tempat untuk menampilkan sebuah kode, entah itu HTML, JavaScript, CSS dan lain-lain. Jika kalian pernah melihat Syntax Highlighter di blog atau web lain pasti ada warna nya, nah dalam artikel ini saya akan membahas tentang bagaimana Cara Membuat Syntax Highlighter Tanpa Javascript ( Tempat sebuah kode yang hanya terdapat satu warna, tidak warna warni ya ).
Cara Membuat Syntax Highlighter Tanpa Javascript
Kebanyakan orang menganggap bahwa membuat Syntax Highlighter ini harus dengan Javascript, padahal itu salah besar. Syntax Highlighter bisa dibuat di web atau blog tanpa Javascript, nah itulah gambaran pokok tentang apa yang saya buat dalam artikel ini, Jika tidak percaya silahkan dicoba hehe.

Syntax Higlighter

Berbicara tentang Syntax Highlighter, pasti anda selalu memikirkan bahwa kalau Speed Loading Blog lambat, pasti akan buruk di mata Google. Nah jangan kawatir, kalau anda memakai Syntax Highlighter yang kami buat ini tidaklah memakan Speed Loading anda, jadi anda tidak perlu ragu untuk memasang Syntax Highlighter ini di blog atau web anda.

Cara Memasang Syntax Highlighter Tanpa Javascript

➸ Pertama-tama anda kunjungi dan login terlebih dahulu di Blogger
➸ Pilih menu Tema di Dashboard, klik Edit HTML
➸ Masukkan kode dibawah 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}

Informasi:

  • #1194f2 adalah kode warna garis disamping Syntax Highlighter
  • #20201d adalah kode warna background dari Syntax Highlighter
  • #fff adalah kode warna text dari Syntax Highlighter
  • Silahkan anda ganti kode tersebut dengan keinginan anda masing masing

Cara Menggunakan Syntax Highlighter Tanpa Javascript

➸ Pertama tama anda masuk ke Dashboard Postingan, silahkan anda mengedit artikel atau membuat artikel baru
➸ Pilih tab HTML ( Bukan Compose ), masukkan kode di bawah ini ( Kode pemanggil Syntax Highlighter)
<pre><code>

Masukan kode yang sudah di parse di sini

</pre></code>
➸ Sialhkan masukkan kode yang sudah di parse ke tulisan "Masukkan Kode yang sudah di parse di sini" untuk memparse kode, silahkan anda menuju ke Sini
➸ Jika sudah selesai, silahkan pratinjau atau simpan/publikasikan

Perlu diingat bahwa Syntax Highlighter ini hanya untuk tempat sebuah kode, tapi kalau kalian mau mengisi nya dengan tulisan lain ya tidak masalah, karena itu semua tergantung pada kalian masing masing. Jika ada yang kurang jelas atau tidak bisa dipahami, silahkan berkomentar.

Berlangganan update artikel terbaru via email:

7 Responses to "Cara Membuat Syntax Highlighter Tanpa Javascript"

  1. Alhamdulillah, ketemu juga nih artikel yang saya cari cari. Makasih gan :D

    ReplyDelete
    Replies
    1. Iya sama sama gan, seneng rasanya bisa bantu agan :D

      Delete
  2. memang cuman butuh tag pre dan code untuk membuat syntax highlighter...ane udah pasang hehe, menarik nanti saya coba untuk blog saya yang lain

    ReplyDelete
    Replies
    1. Iya gan, sangat simple. silahkan di coba :D

      Delete
  3. Replies
    1. iya makasih gan, semoga bisa membantu :D

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel