Cara Menciptakan Syntax Highlighter Otomatis Tanpa Javascript Di Blogger

Syntax Highlighter yaitu sebuah wadah untuk menampilkan sebuah arahan pemograman. Dimana, syntax highlighter ini sering di gunakan untuk menciptakan sebuah tutorial di sebuah situs web.Syntax highlighter umumnya berwarna-warni, sebab memakai banyak javascript, namun pada tutorial kali ini, saya akan membagikan tutorial perihal cara menciptakan syntax highlighter otomatis tanpa javascript di blogger.

Wow tanpa javascript? Emang bisa?

Karena syntax highlighter ini hanya memakai satu warna saja, jadi syntax highlighter ini tidak memerlukan javascript. Untuk memanggil syntax highlighter ini, agan hanya cukup memakai 2 script saja, sebab itulah di sebut otomatis.

(Baca juga : Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger)

Mengenai syntax highlighter yang dapat mengurangi kecepatan blog agan, agan tidak perlu takut sebab syntax highlighter ini hanya memakai script CSS saja. Itulah bedanya syntax highlighter ini dengan syntax highlighter yang lainnya.

Untuk tampilannya menyerupai ini, agan sis juga dapat mengatur warnanya pada CSS yang sudah di berikan pada tutorial saya.

Langsung saja untuk cara memasang syntax highlighter otomatis tanpa javascript, silahkan ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Syntax Highlighter Otomatis Tanpa Javascript di Blogger

• Langkah pertama, silahkan masuk ke akun Blogger agan
• Pilih sajian Tema, klik Edit HTML
• Kemudian 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}

• Pengaturan :
• #1194f2 yaitu arahan warna garis di samping syntax highlighter.
• #20201d yaitu arahan warna background dari syntax highlighter.
• #fff yaitu arahan warna text syntax highlighter.
• Silahkan ganti warna-warna tersebut sesuai cita-cita agan.
• Setelah final mengatur, pilih Simpan tema.

(Baca juga : Cara Praktis Membuat Parse HTML Tools di Halaman Blog)

Cara Menggunakan Syntax Highlighter Otomatis

• Langkah pertama masuk artikel agan, silahkan menciptakan artikel gres ataupun mengedit artikel yang lama
  
  
  
• Jika agan ingin menambahkan syntax highlighter ini di tengah artikel, silahkan agan klik Ctrl + F pada keyboard, kemudian masukan text tersebut di kotak pencarian halaman
  
• Masuk ke tab HTML, kemudian cari text tersebut, kemudian masukan arahan di bawah ini sempurna sesudah text tersebut

<pre><code>  Masukan arahan yang sudah di parse di sini  </pre></code>

• Silahkan masukan arahan yang sudah di parse di tengah arahan tersebut, untuk memparse kode, silahkan masuk ke halaman Parse HTML Tools
  
• Setelah selesai, silahkan lihat Pratinjau, bila sudah sesuai cita-cita pilih Simpan kemudian Publikasikan.

(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)

Demikian tutorial dari saya mengenai cara menciptakan syntax highlighter otomatis tanpa javascript di blogger. Jika ada pertanyaan mengenai cara memasangnya, silahkan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog , biar artikel tadi bermanfaat untuk agan atau sis. Untuk tutorial yang lainnya mengenai tutorial blogging dan sebagainya, silahkan tetap kunjungi blog .

• Twitter
• Facebook
• Google
• Pinterest

Subscribe to receive free email updates: