Cara Membuat Code Highlighter di Blogger terbaru Work

Cara Membuat Code Highlighter di Blogger terbaru Work

Views 5/06/2019 02:52:00 pm
Kalau kalian melihat ini berarti kalian berada ditempat yang tepat untuk mengetahui cara membuat Code Highlighter atau yang biasa kita gunakan untuk menaruh tulisan coding kita dengan tampilan yang tidak memuakkan mata.

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>


<!-- 'SyntaxHighlighter' additions START -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>

<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'/>

<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = false;
    SyntaxHighlighter.all();
</script>
<!-- 'SyntaxHighlighter' additions END -->

Seperti gambar dibawah ini
Penjelasan:
<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

<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

<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

<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 ini

Pertama kalian buatlah post seperti biasa dan pilihlah Html seperti dibawah ini

Penjelasan

Untuk membuat code highlighter, kita harus menggunakan codingan dibawah ini

<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:
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>

  • Thema eclipse
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

  • Thema Emacs
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

  • Thema FadeToGray
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

  • Thema MDUltra
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMDUltra.css' rel='stylesheet' type='text/css'/>

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

Subscribe to: Post Comments (Atom)