Cara Membuat Syntax Highlighter Warna Warni Di Blogger

Halo sobat jagoan sekalian. Disini Admin telah merangkum beberapa script kece yang admin buat sendiri menggunakan javascript. Nah tentunya fungsi nya adalah untuk membuat kode yang berada dalam box script pada syntax highlighter blog Atau didalam postingan teman teman menjadi warna warni Tentunya. Script ini bisa dibilang sama sekali tidak menggunakan bantuan javascript eksternal dari luar. Disini memanipulasi beberapa color dengan bantuan regular ekspresion pada javascript. Dan script ini murni atau pure javascript.

Kira-kira screenshot syntax box script crayon berwarna untuk kode adalah sebagai berikut :

DEMO

Kotak script untuk pembuatan tulisan warna warni ini support untuk berbagai macam kode diantaranya adalah : HTML, CSS, JAVASCRIPT, PHP, TAG KONDISIONAL BLOGGER, PHYTON dan lain sebagainya. Kode ini masih dalam penambahan karakter yang lengkap. agar semua bahasa pemrograman bisa terhighlight dengan baik.

Jika teman teman sekalian memasang nya kedalam blog tentu loading blog anda menjadi cepat dan ringan karena tidak meload halaman dari luar. Dan tentunya ini tetap menjaga page speed pada halaman anda tidak berubah scorenya. Cara pemasangan syntax highlighter atau kotak script html untuk postingan ini sama seperti pada umumnya kita hanya memanggil kode <pre><code> lalu pastekan script kalian di area ini </code></pre> dan setelah itu secara otomatis syntax kode anda akan berubah warnanya sesuai javascript yang akan kita letakan nanti.

Langkah Pemasangan Syntax Highlighter Postingan Blog

Silahkan masuk kehalaman dashboard blogger anda. Lalu masuk ke menu EDIT HTML silahkan copy kode dibawah dan letakan tepat diatas </body>

<script>//<![CDATA[
const _0x116c=['#008eff','.jagoankodequotes','.jagoankodespecialmethreg','lime','.jagoankodecomment','<span\x20class=\x22jagoankodetag\x22>&lt;$1&gt;</span>','innerHTML','replace','#ff0000','orange','#007a80','<span\x20class=\x22jagoankodeasucomment\x22>$1</span>','.jagoankodespecialJSreg','querySelectorAll','<span\x20\x20\x20class=\x22jagoankodespecialCSS\x22>$1</span>','color','#00e7ff','<span\x20class=\x22jagoankodespecialPHP\x22>$1</span>','.jagoankodespecialCSS','violet','getElementsByTagName','.jagoankodenumber','<span\x20class=\x22jagoankodenumber\x22>$1</span>','style','.jagoankodespecialPHP','<span\x20class=\x22jagoankodespecialJSGlobalreg\x22>$1</span>','<span\x20class=\x22jagoankodequotes\x22>$1</span>','.jagoankodespecialfunc','.jagoankodespecialJSGlobalreg','.jagoankodeasucomment','<span\x20class=\x22jagoankodespecialmethreg\x22>$1</span>','<span\x20class=\x22jagoankodecomment\x22>$1</span>','length','#ff12d7','yellow'];(function(_0x40839a,_0x116c3d){const _0x4a936c=function(_0x3b0029){while(--_0x3b0029){_0x40839a['push'](_0x40839a['shift']());}};_0x4a936c(++_0x116c3d);}(_0x116c,0x191));const _0x4a93=function(_0x40839a,_0x116c3d){_0x40839a=_0x40839a-0x0;let _0x4a936c=_0x116c[_0x40839a];return _0x4a936c;};const _0x258840=_0x4a93,jagoankode=document[_0x258840('0x4')]('code');for(let i=0x0;i<jagoankode[_0x258840('0x10')];i++){var data=jagoankode[i][_0x258840('0x19')];data=data[_0x258840('0x1a')](/("[^"]*"|'[^']+')/g,_0x258840('0xa')),data=data[_0x258840('0x1a')](/(!--[^*].*?--)/g,_0x258840('0x1e')),data=data[_0x258840('0x1a')](/(\/\*.*?\*\/|\/\/.*)/g,_0x258840('0xf')),data=data[_0x258840('0x1a')](/&lt;(.*?)&gt;/g,_0x258840('0x18')),data=data[_0x258840('0x1a')](/\b([0-9]+(?:\.[0-9]+)?)\b/g,_0x258840('0x6')),data=data[_0x258840('0x1a')](/\b(new|var|if|else|do|function|while|switch|for|foreach|const|let|in|continue|break|type|name|pattern|title|showaddelement|preferred|value|maxwidgets|cond|expr|render)(?=[^\w])/g,'<span\x20\x20\x20class=\x22jagoankodespecialfunc\x22>$1</span>'),data=data[_0x258840('0x1a')](/\b(indexOf|match|replace|toString|length|search|split|substr|join)(?=[^\w])/g,_0x258840('0xe')),data=data['replace'](/\b(define|echo|print_r|var_dump|require|require_once|include)(?=[^\w])/g,_0x258840('0x1')),data=data[_0x258840('0x1a')](/\b(display|padding|margin|font-family|background|color|font-size|list-style|border-radius|width|height|max-width|max-height|min-width|min-height|overflow|float|vertical-align|z-index|background-color|position|left|top|right|bottom|transition|font-weight|border|align-items|justify-content)(?=[^\w])/g,_0x258840('0x21')),data=data[_0x258840('0x1a')](/\b(getElementsBy(TagName|ClassName|Name)|getElementById|querySelector|querySelectorAll|typeof|instanceof)(?=[^\w])/g,'<span\x20class=\x22jagoankodespecialJSreg\x22>$1</span>'),data=data[_0x258840('0x1a')](/\b(document|window|Array|return|String|Object|Number|\$)(?=[^\w])/g,_0x258840('0x9')),jagoankode[i][_0x258840('0x19')]=data;}const abc=document['querySelectorAll'](_0x258840('0x17'));for(let i=0x0;i<abc[_0x258840('0x10')];i++){abc[i][_0x258840('0x7')][_0x258840('0x22')]=_0x258840('0x0');}const def=document[_0x258840('0x20')](_0x258840('0xd'));for(let i=0x0;i<def[_0x258840('0x10')];i++){def[i][_0x258840('0x7')][_0x258840('0x22')]=_0x258840('0x0');}const bdef=document[_0x258840('0x20')](_0x258840('0x5'));for(let i=0x0;i<bdef[_0x258840('0x10')];i++){bdef[i][_0x258840('0x7')]['color']=_0x258840('0x12');}const abcde=document[_0x258840('0x20')](_0x258840('0x14'));for(let i=0x0;i<abcde[_0x258840('0x10')];i++){abcde[i]['style'][_0x258840('0x22')]=_0x258840('0x16');}const abcdefg=document['querySelectorAll']('.jagoankodetag');for(let i=0x0;i<abcdefg[_0x258840('0x10')];i++){abcdefg[i][_0x258840('0x7')][_0x258840('0x22')]=_0x258840('0x1b');}const aabcdefg=document[_0x258840('0x20')](_0x258840('0xb'));for(let i=0x0;i<aabcdefg['length'];i++){aabcdefg[i][_0x258840('0x7')][_0x258840('0x22')]=_0x258840('0x1c');}const aabbcdefg=document[_0x258840('0x20')](_0x258840('0x1f'));for(let i=0x0;i<aabbcdefg[_0x258840('0x10')];i++){aabbcdefg[i][_0x258840('0x7')][_0x258840('0x22')]=_0x258840('0x3');}const aabbccdefg=document[_0x258840('0x20')](_0x258840('0xc'));for(let i=0x0;i<aabbccdefg[_0x258840('0x10')];i++){aabbccdefg[i][_0x258840('0x7')]['color']=_0x258840('0x13');}const aabbccddefg=document[_0x258840('0x20')](_0x258840('0x2'));for(let i=0x0;i<aabbccddefg[_0x258840('0x10')];i++){aabbccddefg[i]['style'][_0x258840('0x22')]=_0x258840('0x11');}const aabbccdddefg=document[_0x258840('0x20')](_0x258840('0x15'));for(let i=0x0;i<aabbccdddefg[_0x258840('0x10')];i++){aabbccdddefg[i][_0x258840('0x7')][_0x258840('0x22')]=_0x258840('0x1d');}const aabbccdddeefg=document[_0x258840('0x20')](_0x258840('0x8'));for(let i=0x0;i<aabbccdddeefg[_0x258840('0x10')];i++){aabbccdddeefg[i]['style'][_0x258840('0x22')]='#40f7c9';}
//]]>
  </script>

menjadi seperti berikut :

(Tujuannya diletak di kode itu agar HTML mengeksekusi javacript pre code ini terakhir. Dan load halaman anda menjadi ringan dan tidak berat). Jangan Lupa untuk mengklik tombol Save/simpan.

Langkah selanjutnya masuk kedalam postingan blog anda. Ubah mode tampilan menulis menjadi mode tampilan html.

pastekan kode berikut

<pre><code>Masukan Kode Anda Disini</code></pre>

lalu ubah lagi dari tampilan html ke mode tampilan menulis ganti kode masukan kode anda disini dengan kode atau script anda.

Jika sudah silahkan klik publikasikan postingan dan lihat hasilnya.

Sedikit tentang troubleshooting

Troubleshooting

Jika kalian menemui kendala seperti tampilan script berantakan atau keluar script aneh selain script yang kalian pastekan itu sudah bisa dipastikan bahwa penginputan kode anda salah. Pastikan untuk mempaste script tersebut semuanya secara menyeluruh sebanyak satu kali. Jika adanya paste script sebanyak 2 kali atau lebih dalam pengeditan script maka akan terjadi ganda. Otomatis syntax highlighter mendeteksi pengeditan ini dan membuat nya menjadi 2 kali highlight.Walhasil tampilannya akan berantakan. Pastikan melakukannya dengan benar.

Solusi :

Cara mengatasinya hapus kode <pre><code></code><pre> yang terjadi lebih dari 1 kali. didalam <pre><code> induknya. Karena script ini cukup mendeteksi precode induknya saja.

Namun jangan takut sob. Untuk membuat pre code sebanyak yang kalian inginkan bisa hanya saja jangan ditumpuk didalam pre code induk. Script ini pada umumnya merubah tag tag khusus untuk membedakan nya lewat warna. Jadi buat yang ingin belajar script menjadi sangat mudah dan tertarik untuk memahami kodingan yang dibuat.

Sebagai catatan saja. Kode ini diencrypt dengan tujuan supaya tidak merubah script aslinya buat orang yang tidak bertanggung jawab. Script ini di encrypt dengan tujuan untuk dibagikan kepada developer atau pengembang lainnya Karena dibutuhkan sedikit keahlian untuk membongkar kode yang diecrypt dan biasanya ini hanya bisa dilakukan oleh para developer saja. Dan para developer juga pasti sangat menghargai karya orang lain. Dan bagi sobat sekalian kode ini 100% work dan saya jamin. Bisa juga ditesting untuk blogger versi terbaru. Dan sejauh ini tidak menemui kendala.

Namun jika ada kendlaa silahkan beri masukan dikolom komentar akan segera saya perbaiki. Terima kasih 😀

Jika kalian ingin membuat tempat kodenya seperti jagoan kode punya silahkan baca artikel ini : Baca Artikel : Cara Membuat Syntax Highlighter Keren di Blogger