Membuat Tag Pre Dengan Syntax Highlight

UPDATE! Pembaruan pada tambahan kode pre code

Belajar itu memang perlu meluaskan ilmu, mencari referensi kesana dan kemari mencari artikel yang sebenarnya saya inginkan namun tidak tahu apa untuk opsi mencari yang terkait itu tapi berkat sering membaca dan mencari referensi ada sebuah web yang memberikan tutorial dan artikelnya sangat bermanfaat bagi saya dan saya akan mencoba untuk membagikan tutorial ini kepada kalian juga karena mungkin ini artikel yang jarang sekali diketahui oleh beberapa blogger dan biasanya artikel ini hanya menjadi pencarian buat para programmer tapi itu tidak menutup kemungkinan akan saya buat semua artikel menjadi hal yang baik dikonsumsi untuk semua kalangan blogger dan pembaca.

Oh iya sampai lupa ketujuan artikel ini, hehe. Artikel ini akan bermuat tutorial membuat sebuah tag pre berwarna syntax highighter. Tapi sebelumnya ada yang bertanya apa itu teg pre? Awalnya saya juga merasa bingung karen saya bukan seorang lulusan programer jadi mencoba kepo dan mencari di google tentang apa itu tag pre. Jadi apa itu Tag Pre?

Tag Pre adalah sebuah element yang digunakan untuk mempresentasikan sebuah blok teks preformat yang ditulis dengan memiliki struktur berdasarkan ketetapan tifografi artinya adalah teks ditulis apa adanya sesuai format yang ditulis didalam file html. Dan tag pre ini sering digunakan untuk elemen bagi sebuah kode yang mana didalamnya terdapat code.

Jadi secara bayangan saya tag pre itu awalan untuk mencakup isi beberapa kode yang dibungkus dalam sebuah kantong nah kantong inilah yang dinamakan dengan pre dan ketika dimunculkan biasanya dengan hasil apadanya seperti hasil ketika kode dimasukan tanpa adanya settingan apapun. Jika salah tolong dikoreksi ya master, hehehe

Tapi inget! Tag Pre atau Pre Formatted ini beda dengan Blockquote ya. Ya ibaratnya seperti mie kuah sama goreng begitulah intinya sama tapi dalam kemasannya dan bungkus modelnya berbeda. Selain itu juga tag pre mendukung syntax highlighter. Dimana sebuah kode yang ada beberapa perbedaan model ketika dituliskan ada wana merah untuk url ada warna biru untuk kode warna jadi sangat responsive buat mata melihatnya dan indah dan sudah banyak sekali style atau gaya tema highlighter.js ini yang telah dibuat kurang lebih ada 120 bahasa pemrograman.

Dan untuk lebih lengkap cara pemasangan tag pre pada blog langsung simak pembahasan ini.

Hal yang pertama silahkan anda masuk ke dashboard blogger.

Buka Setelan – Tema – Edit template – cari </head> dengan menekan ctrl+f . (*Yang harus diperhatikan untuk anda cobalah untuk membackup template anda terlebih dahulu jika anda tidak ingin ribet ketika adanya kesalahan ataupun lainnya)

Masukan kode Javascript ini diatas </head>

<script src='http://cdn.rawgit.com/editorkode/live/master/highlight.pack.js'/>
<script>hljs.initHighlightingOnLoad();</script>

Lalu pilih salah satu style atau gaya tema css yang anda sukai dan untuk memilihnya anda tinggal pergi ke https://highlightjs.org/static/demo/ disana anda bisa memilih meilihat demo terlebih dahulu jika sudah fix memilihnya anda ingat-ingat namanya yang disamping kiri kemudian cari disini.

DEMO

Nah kemudian anda tinggal meng-copy semua script css nya dan jika anda ingin mengeditnya tinggal edit dibagian pre code (...)
Contoh script highlighter :

pre code {
  display: block;
  font-size:85%;
  margin-top: 5px;
  overflow-wrap: break-word;
  overflow: auto;
  (Masukan script dibawah disini)
  overflow-x:hidden;
  padding: 0.5em;
  background: #282b2e;
  border-left: 5px solid #9A3135;
}

pre .keyword,
pre .selector-tag,
pre .literal,
pre .selector-id {
  color: #93c763;
}

pre .number {
  color: #ffcd22;
}

pre code {
  color: #e0e2e4;
}

pre .attribute {
  color: #668bb0;
}

pre .code,
pre .class pre .title,
pre .section {
  color: white;
}

pre .regexp,
pre .link {
  color: #d39745;
}

pre .meta {
  color: #557182;
}

pre .tag,
pre .name,
pre .bullet,
pre .subst,
pre .emphasis,
pre .type,
pre .built_in,
pre .selector-attr,
pre .selector-pseudo,
pre .addition,
pre .variable,
pre .template-tag,
pre .template-variable {
  color: #8cbbad;
}

pre .string,
pre .symbol {
  color: #ec7600;
}

pre .comment,
pre .quote,
pre .deletion {
  color: #818e96;
}

pre .selector-class {
  color: #A082BD
}

pre .keyword,
pre .selector-tag,
pre .literal,
pre .doctag,
pre .title,
pre .section,
pre .type,
pre .name,
pre .strong {
  font-weight: bold;
}

Update!

  white-space:pre-wrap;
  max-height: 200px; 
  color: #e6e1dc;

Untuk contoh pemasangan kode dibawah ini :

 <pre><code> Masukan disini yah gan script kodenya </code></pre>

Dan lihat hasilnya. Taraaaa awesome for article.

Mudah bukan. Prakterkan jika ada kesalahan atau ada yang kurang jelas, tinggal layangkan masalah dikotak komentar ya

Terima kasih anda telah membaca artikel Membuat Tag Pre Dengan Syntax Highlight . Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

4 Responses to "Membuat Tag Pre Dengan Syntax Highlight "

AnonymousAugust 20, 2017 at 11:55 PM
Bagus artikelnya gan
obat aborsiOctober 25, 2017 at 2:14 PM
Thank you very much for sharing information that will be much helpful for making coursework my effective.

Jika ada kurang paham atau mau memberikan tambahan ilmu tentang hal serupa segera layangkan pada kolom komentar. Karena ilmu yang kita miliki mesti kita amakan karena itu akan berbuah pahala bagi pengamal dan pemberi ilmunya.

"Barangsiapa yang menunjuki kepada kebaikan maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya.” (HR. Muslim no. 1893).

Kode Emoticon :

Membuat Tag Pre Dengan Syntax Highlight

Related Posts:

4 Responses to "Membuat Tag Pre Dengan Syntax Highlight "