Cara Membuat Code Highlighter di Blogger terbaru Work

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

8 Tema Code Syntaxt Highlighter untuk Blogger

Dalam menuliskan code, setiap orang memiliki caranya sendiri-sendiri. Begitu juga dalam penggunaan tema pada text editornya. Tapi dalam penggunaan Syntaxt Highlighter pada blogger, kamu juga ingin menyesuaikan tema yang kamu sukai atau tema yang enak dipandang oleh pengunjung.

Berikut ini thema yang tersedia pada Syntaxt Highlighter. Dan juga code yang harus digunakan untuk menggunakan tema tersebut.

Sebelum kamu melihat tema dibawah, ada baiknya kamu juga membaca ini untuk tahu cara instalasi ataupun penggunaan Syntaxt Highlighter pada blog, Cara Membuat Code Highlighter di Blogger terbaru Work

Ini dia 8 tema yang bisa kamu tiru

Tema Dark

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

Tema Default

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

Tema Django

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

Tema Eclipse

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

Tema Emacs

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

Tema FadetoGray

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

Tema DMUltra

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

Tema Midnight

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

Jika kalian ingin melihat daftar bahasa SyntaxHiglighter, kalian bisa melihat disini

13 Daftar Penambahan Bahasa Syntax higlighter Pada Blogger

Dalam menggunakan Syntax higlighter, kamu akan membutuhkan code khusus dalam artikelmu. Misalkan kamu mau menulis c++ maka syntax c++ perlu ditambahkan pada </head> di blogger. Begitu pula dengan php.

Sebelum kamu melihat daftar ini, sebaiknya kalian membaca cara penggunaan Syntax higlighter ini disini Cara Membuat Code Highlighter di Blogger terbaru Work

Berikut ini codingan untuk setiap bahasa yang kamu perlukan

C++

Syntax header

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

Penggunaan

<pre class="brush: cpp">
Koding disini
</pre>

C#

Syntax header

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

Penggunaan

<pre class="brush: csharp">
Koding disini
</pre>

Delphi

Syntax header

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

Penggunaan

<pre class="brush: delphi">
Koding disini
</pre>

Java

Syntax header

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

Penggunaan

<pre class="brush: java">
Koding disini
</pre>

Perl

Syntax header

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

Penggunaan

<pre class="brush: perl">
Koding disini
</pre>

Php

Syntax header

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

Penggunaan

<pre class="brush: php">
Koding disini
</pre>

Javascript

Syntax header

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

Penggunaan

<pre class="brush: jscript">
Koding disini
</pre>

Phyton

Syntax header

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

Penggunaan

<pre class="brush: phyton">
Koding disini
</pre>  

Ruby

Syntax header

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

Penggunaan

<pre class="brush: ruby">
Koding disini
</pre>  

Sql

Syntax header

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

Penggunaan

<pre class="brush: sql">
Koding disini
</pre>  

XML

Syntax header

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

Penggunaan

<pre class="brush: xml">
Koding disini
</pre>  

Css

Syntax header

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

Penggunaan

<pre class="brush: css">
Koding disini
</pre>  

Saas

Syntax header

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

Penggunaan

<pre class="brush: saas">
Koding disini
</pre>   

Apabila ingin menggunakan thema Syntaxt Highlighter yang lain kalian bisa melihat disini