Dua Cara Memasang Syntax Highlighter (Code Editor) Pada Blogger
March 02, 2020
•
Comment
Apa itu Syntax Highlighter ? Syntax Highlighter merupakan sebuah fitur editor teks yang digunakan untuk membungkus atau menulis bahasa pemrograman, scripting, atau bahasa markup seperti HTML. Fitur syntax highlighter ini akan menampilkan teks, terutama kode sumber, dalam berbagai warna.
Nah bagi teman teman yang memiliki sebuah web log yang membahas seputar kode kode pemrograman, kamu bisa gunakan Syntax Highlighter untuk membungkus kode tersebut agar menjadi lebih menarik.
Disini saya akan membagia dua cara memasang Syntax Highlighter (Code Editor) pada postingan blog, adapun cara cara pemasangannya sebagai berikut.
- Memasang Syntax Highlighter Hanya Menggunakan CSS,
Memasang Syntax Highlighter dapat dibuat hanya menggunakan kode CSS (Cascading Style Sheet) aja, tanpa perlu memasang Javascript, namun memasang Syntax Highlighter menggunakan CSS ini hanya dapat menampilkan satu warna saja. - Memasang Syntax Highlighter Dengan Javascript,
Memasang Syntax Highlighter dengan Javascript menurut saya sangatlah keren, mengapa ? Dengan memasang Syntax Highlighter dengan Javascript, akan menampilkan teks dalam berbagai warna. Situs Blog yang membahas tutorial Programming atau bahasa Markup juga kebanyakan menggunakan ini termasuk saya sendiri.
Nah itulah dua cara memasang Syntax Highlighter (Code Editor), jika kamu ingin memasang Syntax Highlighter kamu bisa memilih salah satu cara diatas, dan tutorial pemasangannya ada diartikel ini, silahkan ikuti tutorial dibawah ini.
Dua Cara Memasang Syntax Highlighter (Code Editor)
Jika template kamu sebelumnya sudah memiliki kode Syntax Highlighter, silahkan dihapus terlebih dahulu semuanya, agar tidak bentrok
Memasang Syntax Highlighter Menggunakan CSS :
1. Pertama, login dulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,
4. Terakhir Simpan atau save template..post-body pre {
background-color: #292E34;
border-left: 5px solid #ff69b4;
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
color: orange;
font-size: 12px;
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}Memasang Syntax Highlighter Dengan Javascript :
Saya anggap disini kamu sudah masuk ke teks editor blogger template.
1. Copy Script dibawah ini dan letakkan tepat diatas kode <head>,
<script type='text/javascript'>
//<![CDATA[
// Syntax Highlighter
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/atelier-lakeside-dark.min.css");
//]]>
</script>/* Syntax Highlighter CSS - Anirocksite*/
pre, pre code {
font-family: Consolas, Monaco, 'Andale Mono', monospace;
word-spacing: normal;
font-size: 13px;
line-height: 1.3em;
}
pre code {
padding: 20px !important;
margin: 0;
background-color: #292E34 !important;
border-radius:8px;
}
.post-body code {
color: #e20d58;
}<b:if cond='data:view.isPost'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>
</b:if>Cara Menggunakan Syntax Highlighter
Untuk cara menggunakan syntax Highlihter cukup mudah, namun kamu harus ingat satu hal, ketika memasukkan kode kedalam Syntax, kode tersebut harus kamu parse terlebih dahulu. Berikut cara penggunaannya.
1. Masuk ke ke Menu Postingan ⇒ New Entry,
2. Pilih mode penulisan HTML (Bukan Compose),
3. Untuk pemanggilan kodenya, tulis seperti ini,
<!-- Cara Memanggil Syntax di Postingan Blog -->
<pre><code>
Masukkan Kode HTML, CSS , Javascript Yang Telah Diparse Disini.
</code></pre>Sekian tutorial bagaimana Dua Cara Memasang Syntax Highlighter (Code Editor) yang dapat saya bagikan, dan Semoga bermanfaat :D.
 Pada Blogger){kind=link}
0 Response to "Dua Cara Memasang Syntax Highlighter (Code Editor) Pada Blogger"
Kebijakan berkomentar :
Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,
Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,
Dilarang berkomentar menggunakan Link Aktif,
Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.
Post a Comment