Biasanya kita bisa saja membuat code kita terlihat menarik dengan css, tapi itu dirasa kurang memuaskan karena tidak adanya nomer di samping kiri ataupun perbedaan warna pada codingan layaknya kita membuat coding di editor seperti vscode, atom ataupun sublime.
Baiklah, disini admin akan membagikan cara membuat Code Highliter di Blogger terbaru 2019 yang work, dan kita akan membutuhkan bantuan dari SyntaxHiglighter yang sudah ada di CDN
Cara instalasi Highlighter di Blogger
Pertama silahkan masuk ke blogger kalian dan masuk ke menu theme> Edit HTML
Setelah itu cari </head> mengunakan ctrl+f dan taruh codingan dibawah ini, diatas </head>
Seperti gambar dibawah ini
1 | <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/> |
Codingan diatas digunakan untuk menentukan thema yang digunakan, untuk melihat thema-thema yang tersedia, kamu bisa melihatnya diakhir
1 2 | <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/><script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/> |
Kedua codingan diatas merupakan codingan wajib yang harus ditambahkan karena merupakan inti penggunaan code Syntax Highligter
1 2 3 4 | <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/><script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/><script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js' type='text/javascript'/><script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/> |
Codingan diatas, yang memakai kata Php,JSScript,Css,Xml adalah merupakan bahasa codingan yang mau dipakai, untuk contohnya nanti ada dibawah
1 2 3 4 | <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = false; SyntaxHighlighter.all();</script> |
Codingan diatasmerupakan konfigurasi dari syntax highlighter, kalian bisa membaca dokumentasinya disini Configurasi
Cara Penggunaan
Setelah penginstallan, kita akan memasuki cara penggunaan Syntax highlighter, silahkan ikuti cara dibawah iniPertama kalian buatlah post seperti biasa dan pilihlah Html seperti dibawah ini
Untuk membuat code highlighter, kita harus menggunakan codingan dibawah ini
1 2 3 | <pre class="brush: php">Isi codingan</pre> |
Seperti yang saya jelaskan sebelumnya tentang bahasa pemrograman yang dipakai didalam isi coding,
Brush: php ini merupakan penanda bahasa codingannya, kamu bisa mengubah php menjadi xml, css sesuai script yang ada pada diatas </head>
Dan lihatlah beginilah hasil dari syntax higlighter
Thema tambahan
Jika kalian ingin mengganti thema dari syntax higlihter, kalian tinggal ganti codingan dibawah ini
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>
Yang ada di </head> tadi menjadi beberapa thema pilihan kalian. Pilihlah salah satu dari dibawah ini
default:
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
- Thema django:
- Thema eclipse
- Thema Emacs
- Thema FadeToGray
- Thema MDUltra
Untuk melihat thema-themanya kalian bisa lihat thema Syntax Highlighter 8 Tema Code Syntaxt Highlighter untuk Blogger
Bahasa yang support
Untuk menambahkan bahasa codingan yang kalian inginkan seperti c++ atau lain, kalian bisa menambahkan codingannya diatas </head> seperti dibawah ini
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
Untuk codingan lain kalian silahkan pilih di sini daftar coding yang support, 13 Daftar Penambahan Bahasa Syntax higlighter Pada Blogger
Itu dia semuanya sekian terima kasih
EmoticonEmoticon