Cara Membuat Syntax Highlighter Tanpa Javascript

Cara Membuat Syntax Highlighter Tanpa Javascript - Halo teman teman writerhilmy.xyz, apa kabar semuanya yang sedang baca artikel kali ini, semoga kalian yang sedang membaca artikel ini dalam keadaan sehat, pada kesempatan hari ini, saya akan membahas yang berjudul Cara Membuat Syntax Highlighter Tanpa Javascript.

Fungsi Dari Syntax Highlighter Buat apa mas? fungsinya yaitu utuk menaruh kode html, javascript, php dan masih banyak lagi, biasanya widget ini sering dipakai di blog yang berisi tutorial blogging atau pemograman, tetapi jika kalian mencari tutorial di yang lain, kebanyakan pada menggunakan javascript, nah pada kali ini, saya akan membagikan sebuah tutorial membuat syntax highlighter tanpa javascript, jadi nanti jika kalian memakainya akan sangat mudah, tanpa harus menaruh kode pemanggil terlebih dahulu, jika kalian penasaran, kalian bisa simak artikel ini sampai terakhir.

Baca Juga : Cara Membuat Logo Online Dengan Mudah

Cara Membuat Syntax Highlighter Tanpa Javascript

  1. Langkah pertama seperti biasa, yaitu kalian harus masuk ke blogger.com, jika belum masuk silahkan terlebih dahulu untuk masuk.
  2. Lalu klik tombol tema di bilah sisi kiri.
  3. Lalu, kalian klik Edit HTML
  4. lalu kalian cari kode ]]></b:skin>, untuk memudahkan dalam pencarian, silahkan kalian untuk menggunakan fungsi CTRL+F.
  5. jika kalian sudah menemukan kode tersebut, maka kalian sali kode dibawah ini.

/* Syntax By Writer Hilmy */
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 kode warna garis samping Syntax Highlighter#20201d Adalah kode warna background Syntax Highlighter#fff Adalah kode warnba tulisan Syntax Highlighter

  • Lalu kalian klik simpan template. 

Langkah Pemakaian Syntax Highlighter

  • Pertama, kalian harus membuat artikel terlebih dahulu, tetapi jika kalian tidak sempat membuat artikel, kalian bisa mengedit artikel yang membutuhkan Syntax Highlighter
  • Lalu, kalian cari kata yang ingin di tempelkan syntax.
  • lalu kalian masukan kode dibawah ini.
  • 
    <pre><code>
    Masukan kode yang sudah di parse di sini
    </pre></code>

Sebelum kalian memasukan script ke syntax, kalian harus memparse terlebih dahulu kodenya.

Bagaimana dengan tutorial yang saya berikan? apakah bermanfaat bagi anda? jika kalian berkenan ingin berkomentar, jangan malau-malu, silahkan kalian berkomentar dengan postitif, sekian dari artikel hari ini, terimakasih

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Syntax Highlighter Tanpa Javascript"

Post a Comment

Selamat Datang Di Blog Writer Hilmy
# Berkomentarlah Dengan Bijak
# Berkomentarlah Sesuai Dengan Topik Artikel
# Jangan Lupa Untuk Mengunjungi Situs Ini Lagi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel