Sering kali kita mendapati sebuah artikel yang membagikan sebuah script atau kode tidak terlihat rapih dan berantakan yang membuat tampilan postingan atau blog sendiri menjadi friendly.
Sebenarnya cara itu sangat lah mudah jika memakai Syntax Highlighting pada template tersebut, Syntax Highlighting akan membungkus kode-kode tersebut didalam kotak yang akan membuat tampilan rapih dan friendly di blog kita.
Sekedar informasi mengenai Syntax Highlighting merupakan fitur editor text yang digunakan untuk bahasa pemograman, skrip, atau markup seperti HTML Fitur tersebut menampilkan teks pada kode sumber dalam berbagai warna dan font sesuai dengan kategori dan istilah (sumber : wikipedia)
Lantas bagaimana cara menerapkan Syntax Highlighting pada template blog kita, berikut ini cara nya :
Sekedar pemberitahuan kode ini akan bekerja apabila template yang digunakan sudah menerapkan Jquey Library contoh nya adalah : penggunaan Jquery <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’/>
Langkah Pertama #1
Login ke Blog kalian lalu buka Tema > Edit HTML > Cari Kode ini </Head> atau </head><!–<head/>–> dengan bantuan CTRL + F dan paste kode berikut ini di atas kode tersebut :
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>
Klik simpan dan jangan keluar dahulu pada tampilan edit HTML
Langkah Kedua #2
Kemudian cari kembali kode sebagai berikut ini pada template kalian </body> atau <!–</body>–></body> dan copy kode dibawah ini dan pastekan di atas kode tersebut :
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Lalu simpan tema kalian.
Cara penggunaan Syntax Higlighting ini adalah dengan cara copy code berikut di bawah ini pada saat membuat postingan denga menggunakan Mode HTML
<pre><code> COPY CODE KAMU DISINI </code></pre>
Namun sebelum itu kode yang kamu akan tampilkan harus parse terlebih dahulu baru akan terbaca oleh atau tampil pada postingan kalian, kode yang tidak di parse terlebih dahulu maka tidak akan tampil.
Untuk parse kode CSS, Javascript, HTML dan yang lainnya kalian dapat menggunakan link berikut ini :
https://lewatinaja.com/p/tool-parse-html-sederhana.html
Cukup mudah bukan, silahkan bagikan ke sosial media jika kalian menyukai artikel ini dan terimakasih telah berkunjung.
Related Posts:
- √ Sakarepmu Template Responsive Bikin Kece Blog Sakarepmu Template Blog Responsive – Dalam dunia blogging tentunya bukan hanya menulis sebuah artikel saja agar blog kamu terkenal namun tampilan blog tentu juga perlu di perhatikan terutama dalam segi…
- 5 Rekomendasi Aplikasi Penjualan Excel Paling Praktis untuk… 5 Rekomendasi Aplikasi Penjualan Excel Paling Praktis untuk UMKM – Sejauh ini, ngelola bisnis bukanlah perkara mudah. Karena kegiatan yang meski anda lakukan bukan hanya sekedar menjual barang, kemudian mendapatkan…
- √ 6 Aplikasi Android Penghasil Rupiah Paling Legit Aplikasi Android Penghasil Rupiah Terbaru, di zaman era digital ini mencari uang sebenarnya sudah sangat mudah asalkan kita mau untuk berusaha dengan giat dan tidak pernah bosan dalam menjalankannya.Bahkan hanya…
- Download Source Code Android Snapchat With Admob + Firebase Download Source Code Android – Pada kesempatan kali ini saya akan membagikan sebuah open source code android sosial network mirip seperti snapchat, aplikasi ini bernama chatsnap terintergrasi dengan layanan firebase…
- 6 Hal Penting Ini Perlu Di Perhatikan Saat Membeli HP… Apakah kamu mempunyai sebuah rencana untuk mengganti atau membeli HP Smartphone baru ? Banyaknya pilihan merk dan model smartphone yang beredar di pasaran tentunya akan membuat kamu bingung menentukan pilihan.…
- Cara Memasang Script Anti Copy-Paste Pada Template Blogger Memasang Script Anti Copy Paste pada template untuk mencegah plagiarisme, Sebelumnya saya sudah pernah membahas mengenai cara melindungi konten dengan sumber link otomatis menggunakan javascript, namun rasanya itu belum cukup…
- √ 3 Aplikasi Android Penghasil Rupiah Paling Legit Aplikasi Android Penghasil Rupiah Legit Terbaru 2021, di zaman era digital ini mencari uang sebenarnya sudah sangat mudah asalkan kita mau untuk berusaha dengan giat dan tidak pernah bosan dalam menjalankannya, Banyak…
- Akun yang Lagi Hits di Instagram Tahun 2022 Akun yang Lagi Hits di Instagram Tahun 2022 – Di antara banyanya akun di instagram, sebagian besar di antara anda mungkin ada yang penasaran sebenarnya akun siapa sih yang lagi…
- (DOC) Surat Perjanjian Kontrak Pengadaan Barang Dan Jasa Dalam kontrak pengadaan barang dan jasa dengan nilai lebih dari 200jt tentunya akan dibutuhkan surat perjanjian kontrak, hal ini berhubungan dengan Peraturan Presiden Nomor 12 Tahun 2021 tentang Perubahan Atas…
- Rekomendasi Apk Download Video FB dan Youtube Rekomendasi Apk Download Video FB dan Youtube – Di tengah gempuran banyaknya media sosial saat ini, tampaknya tetap tidak membuat pengguna FB dan youtube berkurang ya. Bahkan mungkin, tetap eksis…
- Cara Meningkatkan Domain Authority (DA) & Page Authority… Cara mudah meningkatkan DA & PA Domain Website Sendiri – Seperti yang kita ketahui dalam mengoptimalisasi sebuah website agar dapat berada pada halaman awal kunci pencarian/keyword maka kita akan membutuhkan…
- Aplikasi Android Kartu Ucapan + Bingkai Foto Hari Raya Idul… Aplikasi Kartu dan Bingkai Foto Hari Raya Idul Fitri 2021 – Dalam menyambut hari raya idul fitri 1442 H tentu banyak dari kita semua ingin memeriahkan suasana suka cita tersebut…
- Cara Membuat Tombol Button Download Atau Demo Di Blog Pada kali ini saya akan membagikan bagaimana caranya membut tombol Button download atau demo responsive serta keren di blog sobat, apalagi jika blog kalian merupakan blog yang niche berbagi link…
- Template Blog Terbaik Untuk Meningkatkan Pendapatan Adsense Template Blog Terbaik Untuk Meningkatkan Pendapatan Adsense – Pada kesempatan kali ini saya akan membagikan cara meningkatkan pendapatan adsense pada blog anda dengan sebuah template yang mempunyai High CTR pada…
- Aplikasi Pengubah Teks Menjadi Suara terbaik Aplikasi pengubah teks menjadi suara terbaik – Untuk saat ini ada banyak sekali orang-orang yang berminat untuk mengubah teks menjadi suara. Dan Setiap orang pasti mempunyai kebutuhannya masing-masing. Dan kalau…
- Cara Cepat Mendapatkan 1000 Subscriber Dan 4000 Jam Tayang Mendapatkan 1000 Subscriber dan 4000 Jam Tayang, Jika anda merupakan seorang youtuber akan tetapi channel yang anda buat hanya memiliki sedikit pengikut dan membuat jam tayang anda terasa lama untuk…
- Daftar Alamat Lengkap 56 SMP Negeri Di Kota Bekasi Daftar Alamat SMP Negeri Di Kota Bekasi – Seperti yang kita ketahui untuk mencari alamat seperti rumah, sekolah, dan tempat lainnya kini sangat mudah sekali dengan adanya Google Maps, Namun…
- 4 Peluang Usaha Yang Sangat Menjanjikan Di Tahun 2021 Selamat tahun baru 2021, berbincang mengenai tahun baru pastinya sobat menginginkan perubahan atau pencapaian yang baru pada tahun sebelumnya contohnya saja ingin menjadi seorang pengusaha agar sukses pada tahun ini.Menjadi…
- 6 Tips Memilih Software Editing Video Yang Perlu Kamu… Saat ini, banyak dari kita menggunakan software editing video untuk berbagai tujuan. Misalnya, jika kamu adalah seorang youtuber, kamu mungkin memerlukan beberapa software yang cocok untuk mengedit video dan merendernya…
- Rekomendasi Aplikasi Belajar Bahasa Jerman Terbaik Rekomendasi Aplikasi Belajar Bahasa Jerman Terbaik – Ada banyak sekali bahasa asing yang bisa dipelajari secara online. Salah satunya adalah bahasa Jerman. Yang mana, pembelajaran secara onlinenya bisa anda lakukan…
- Cara Install ADB Fastboot yang Mudah Cara Install ADB Fastboot – Untuk anda yang kerap kali membaca informasi mengenai tutorial root ponsel, dan juga cara menginstall custom firmware, pasti sudah tidak asing lagi dengan istilah ADB…
- Template Blog Untuk Streaming Film Dan Download Video Gratis Pada postingan kali ini saya akan membagikan sebuah template blog streaming premium dengan tampilan yang super ringan dan tentunya SEO Friendly serta gratis untuk sobat kalian semua yang ingin membuat…
- √ Cara Membuat Iklan Anchor Sticky Untuk Desktop Dan Mobile Cara Membuat Iklan Anchor Sticky Untuk Tampilan Desktop Dan Mobile – Pada kesempatan kali ini saya akan membagikan sebuah tutorial dalam menampilkan iklan anchor sticky secara manual pada blog kalian,…
- Cara Membuat Tabel Responsive di Blog Cara Membuat Tabel Responsive di Blog – Bagi seorang blogger, mengetahui bagaimana cara membuat tabel responsive merupakan salah satu hal yang sangat penting untuk dikuasai. Terlebih lagi bagi anda yang…
- Rekomendasi Aplikasi Belajar Bahasa Jepang Terbaik Rekomendasi Aplikasi Belajar Bahasa Jepang Terbaik – Makin ke sini, kita makin menyadari bahwasanya skill bahasa asing adalah salah satu skill yang harus dimiliki oleh setiap orang. Dalam catatan, mereka…
- Siencang Aplikasi Berbasis Web Memudahkan Membuat RKA Siencang merupakan aplikasi berbasis web yang dibuat untuk merencanakan kegiatan dan anggaran agar lebih cepat dan efisien serta akuntable, dari segi namanya yang sudah identik dengan kultur betawi membuat aplikasi…
- Kelebihan Dan Kekurangan Pada Windows 10 Yang Perlu Kamu… Windows 10 yang dirilis pada tahun 2015 telah menjadi Operating System (OS) paling populer di seluruh dunia. kepopuleran ini disebabkan oleh berbagai kelebihan terbaru yang ditawarkan Microsoft dibandingkan sistem operasi…