Membuat Syntax highlighter otomatis pada box script di blogger
Hello sobat icloudZer kali ini admin bakalan menjabarkan mengenai caranya membuat Syntax highlighter di blogger dengan tampilan keren dan menarik pastinya
Info: Oke sobat ICloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita baas bersama sama
Syntax highlighter
Dalam pengertian lainnya untuk membuat box pre code bewarna di blogger secara otomatis di blogger adalah dengan menggunakan Syntax highlighter atau kotak script bewarna di blogger lebih di kenal dengan sebutan syntax highlighter, sedangkan Syntax highlighter adalah fitur untuk membuat text kode bisa bewarna secara otomatis di blogger, dan pada postingan admin sebelumnya sudah membahas mengenai kotak script, jika kamu ingin membuat kotak script pre code di blogger kamu bisa membacanya disini
Fungsi Syntax highlighter
Fungsi dari Syntax highlighter di blogger adalah untuk menyoroti text kode yang menggunakan element tag pre code agar berwarna warni secara otomatis menurut isi dan text yang ada di dalam nya, nah biasanya Penggunaan Syntax highlighter sering di jumpai pada web ataupun aplikasi berbasis koding untuk menampilkan kode sistem yang keren dengan menggunakan Syntax highlighter ini
Kategori Script
fungsi lainnya dari Syntax highlighter berwarna di blogger ini adalah fitur pemberian label atau kategori di sudut samping box pre code secara otomatis ataupun secara manual, jika kamu ingin membuat kotak pre code dengan kategori yang muncul di sudut samping box maka artikel berikut ini sangat pas untuk kamu pelajari
Contoh Tampilan
Agar kamu tidak penasaran dengan contoh tampilan dari Syntax highlighter pada box script agar jadi bewarna di blogger, kamu bisa periksa seperti contoh tampilan di bawah ini
<script>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("%3D","%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("%3D%3D","%3D%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("&m=1","&m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("&m=1")); window.history.replaceState({}, document.title, clean_uri); } var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("?m=1")); window.history.replaceState({}, document.title, clean_uri);}; var protocol=window.location.protocol.replace(/\:/g,''); if(protocol=='http'){ var url=window.location.href.replace('http','https'); window.location.replace(url);} /*]]>*/</script>
Cara penerapan
Baiklah sobat icloudZer saat nya admin bakalan menjelaskan mengenai bagaimana caranya membuat Syntax highlighter bewarna di blogger baca dan ikuti artikel ini hingga selesai agar paham dan mudah untuk di pelajari
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah dengan menyalin kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode </head>
<style>
/* syntax highlighter */
.rahljs,.rahljs-subst,.rahljs-tag{color:#eaebec}
.rahljs-emphasis,.rahljs-strong{color:#a8a8a2}
.rahljs-bullet,.rahljs-link,.rahljs-literal,.rahljs-number,.rahljs-quote,.rahljs-regexp{color:#ae81ff}
.rahljs-code,.rahljs-section,.rahljs-selector-class,.rahljs-title{color:#a6e22e}
.rahljs-strong{font-weight:800}
.rahljs-emphasis{font-style:italic}
.rahljs-attr,.rahljs-keyword,.rahljs-name,.rahljs-selector-tag{color:#f15a5a}
.rahljs-attribute,.rahljs-symbol{color:#66d9ef}
.rahljs-class .rahljs-title,.rahljs-params{color:#f8f8f2}
.rahljs-addition,.rahljs-built_in,.rahljs-builtin-name,.rahljs-selector-attr,.rahljs-selector-id,.rahljs-selector-pseudo,.rahljs-string,.rahljs-template-variable,.rahljs-type,.rahljs-variable{color:#e6db74}
.rahljs-comment,.rahljs-deletion,.rahljs-meta{color:#75715e}
.rahicon-cp{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M391.89,450H163a50.17,50.17,0,0,1-50.11-50.11V98.11A50.17,50.17,0,0,1,163,48h150.1a15,15,0,0,1,10.61,4.39L437.61,166.27A15,15,0,0,1,442,176.88v223A50.17,50.17,0,0,1,391.89,450ZM163,78a20.13,20.13,0,0,0-20.11,20.11V399.89A20.13,20.13,0,0,0,163,420H391.89A20.13,20.13,0,0,0,412,399.89V183.09L306.91,78Z' fill='%23c6c9ce'/%3E%3Cpath d='M427,191.88H348.23a50.17,50.17,0,0,1-50.11-50.11V63a15,15,0,0,1,30,0v78.77a20.13,20.13,0,0,0,20.11,20.11H427a15,15,0,0,1,0,30Z' fill='%23c6c9ce'/%3E%3C/svg%3E");background-size:55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px -5px -14px}
.rahsyn > .rahicon-ck{background:green}
.rahicon-ck{cursor:pointer;padding:0 7px;margin:-5px 0 -5px -5px;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=');background-size:100% 100%}
#rahcopy i.rahicon-cp:before{content:'Salin Kode';font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;visibility:hidden;opacity:0;transition:all .2s ease}
#rahcopy:hover i.rahicon-cp::before{visibility:visible;opacity:1;top:-33px}
#rahcopy i.rahicon-cp:after{content:'';position:absolute;top:0;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;opacity:0;visibility:hidden;transition:all .2s ease}
#rahcopy:hover i.rahicon-cp::after{visibility:visible;opacity:1;top:-9.8px}
#rahcopy i.rahicon-ck:before{content:'Kode tersalin!';font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;transition:all .2s ease}
#rahcopy i.rahicon-ck:after{content:'';position:absolute;top:-9.8px;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;transition:all .2s ease}
</style>Info: Setiap template itu berbeda beda, so jika meletakkan di atas kode </head> tidak ampuh taurh di dalam tag kode ]]></b:skin> dengan syarat hapus dulu tag kode <style> pada kode CSS di atas
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan adalah dengan menyalin lagi kode javascript di bawah ini kemudian kamu bisa meletakkannya di atas kode </body>
<script>
//<![CDATA[
/* Highlight Style by Icloudice.com */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('"1I 1J";!7(e,o){"1d"==I z&&"1d"==I z.J?z.J=e.2?o(e):7(e){B(!e.2)1K 1L 1M("A q 1N a 2 1O 1P");K o(e)}:o(e)}("1Q"!=I q?q:1R,7(y,e){3 o;7 t(e){3 m={L:"#w-1e",Y:"x",M:0,C:"E E-1f",N:"",Z:"E E-1S O-1g",1h:"",11:1T};7 o(){m.M?1i(t,M):t()}7 t(){3 e,o,t;2.h(m.L)||((e=2.P("j")).12=7(){v(3 e=["<F>","@1U 1V {"," .6 { Q: 13; }","}"," .1W-1X .6 {"," 1j: 1k(1Y,1l,1Z,.10);"," }"," .6-G {"," 1m: 20;"," }"," .6 {"," Q: 1n;"," 1n-21: 22;"," 23-24: 25;"," 1j: 1k(26,27,28,.29);"," 14: #2a;"," 1o-2b: 2c;"," 2d-2e: 1.2f;"," R: 0.5;"," 2g: R 2h 0.2i;"," 2j-2k: 0 1p 0 1p;"," 2l: 1q 1r 1q 1r;"," 1m: 2m;"," 1s: 0;"," 2n: 0;"," }"," .6.2o {"," R: 0.8;"," }",""," .6:1t {"," R: .1l;"," }",""," .6 a,"," .6 a:1t {"," O-2p: 13;"," }",""," .6-D {"," 2q-1s: 2r;"," 1o-2s: 2t;"," 14: 2u;"," }"," .E.O-1g:{ 14: 2v !2w }","</F>",\'<j 1u="w-1e" F="Q:13">\',\' <j 15="6">\',\' <j 15="6-D" >{{D}}</j>\',\' <j 1u="2x" 2y="2z 2A">\',\' <i 15="{{C}}"></i></i></a>\'," </j>"," </j>","</j>"],o="",t=0;t<e.k;t++)o+=e[t]+"\\n";K o}(),o=e.h("F"),t=e.h(m.L),2.x.S(o),2.x.S(t));v(3 n=2.h(m.L).12,c=2.1v("G>16.17"),a=0;a<c.k;a++){3 r=c[a];B(!r.h(".6")){v(3 d="",l=0;l<r.f.k;l++){3 i=r.f[l];B("D-"===i.1w(0,9)){d=r.f[l].T("D-","");18}B("1x-"===i.1w(0,5)){d=r.f[l].T("1x-","");18}B(!d)v(3 s=0;s<r.f.k;s++)B("17"!=r.f[s]){d=r.f[s];18}}"2B"==(d=d?d.2C():"O")?d="2D":"2E"==d?d="2F":"19"==d?d="2G":"2H"==d?d="2I":"2J"==d&&(d="2K");3 p=n.T("{{D}}",d).T("{{C}}",m.C).1y(),u=2.P("j");u.12=p,u=u.h(".6");3 g=r.U;g.f.1a("6-G"),m.N&&(u.h(".w-V").W=m.N),g.2L(u,r)}}2.h(m.Y).H("2M",7(c){K c.1z.f.2N("w-V")&&(c.2O(),c.2P=!0,7(){3 e=c.1z.U.U.U,o=e.h("G>16"),t=o.2Q||o.W;m.11&&(t=m.11(t,o));3 n=2.P("2R");n.1A=t.1y(),2.x.S(n),n.F.Q="2S",y.2.2T?n.2U(0,n.1A.k):n.2V(),2.2W("1f"),2.x.2X(n),7(e){3 o=m.C.1B(" "),t=m.Z.1B(" "),n=e.h(".w-V");n.W=m.1h;v(3 c=0;c<o.k;c++)n.f.1C(o[c]);v(c=0;c<t.k;c++)n.f.1a(t[c]);1i(7(){n.W=m.N;v(3 e=0;e<t.k;e++)n.f.1C(t[e]);v(e=0;e<o.k;e++)n.f.1a(o[e])},2Y)}(e)}()),!1})}2Z.30(m,e),"31"==2.32?2.H("1D",o):o()}"33"!=I o&&(o=!1),y.1b=t,y.z&&y.z.J&&(y.z.J.1b=t),o&&t()});2.H("1D",(34)=>{3 1c=2.1v("G>16");v(3 i=0;i<1c.k;i++){17.35(1c[i])}3 1E={Y:".36-x",M:0,C:"w-V",Z:"w-37",38:7(a,b){K a}};q.1b(1E)});7 X(){3 e=2.P("39");e.3a="3b://3c.3d.3e/3f/3g/1F.19/10.4.0/1F.3h.19",2.x.S(e)}q.H?q.H("3i",X,!1):q.1G?q.1G("1H",X):q.1H=X;',62,205,'||document|var|||rahsyn|function||||||||classList||querySelector||div|length||||||window|||||for|rahicon|body||module||if|copyIconClass|language|fa|style|pre|addEventListener|typeof|exports|return|templateSelector|loadDelay|copyIconContent|text|createElement|display|opacity|appendChild|replace|parentElement|cp|innerText|downloadJSAtOnloadz|contentSelector|checkIconClass||onBeforeCodeCopied|innerHTML|none|color|class|code|rahljs|break|js|add|highlightJsBadge|pres|object|tmp|copy|success|checkIconContent|setTimeout|background|rgba|95|position|flex|font|4px|5px|8px|right|hover|id|querySelectorAll|substr|lang|trim|srcElement|value|split|remove|DOMContentLoaded|options|highlight|attachEvent|onload|use|strict|throw|new|Error|with|is|required|undefined|this|check|null|media|print|dark|mode|78|109|relative|direction|row|white|space|normal|88|101|111|63|333|size|13px|line|height|5em|transition|linear|5s|border|radius|padding|absolute|top|active|decoration|margin|10px|weight|600|goldenrod|limegreen|important|rahcopy|title|Salin|Code|ps|toLowerCase|powershell|cs|csharp|javascript|ts|typescript|fox|foxpro|insertBefore|click|contains|preventDefault|cancelBubble|textContent|textarea|block|documentMode|setSelectionRange|select|execCommand|removeChild|2e3|Object|assign|loading|readyState|boolean|event|highlightBlock|post|ck|onBeforeTextCopied|script|src|https|cdnjs|cloudflare|com|ajax|libs|min|load'.split('|'),0,{}))
//]]>
</script><script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js'/>Info: Kode Javascript diatas tidak bisa kamu edit silahkan langsung saja gunakan seperti yang suah admin jelaskan sebelumnya
Cara penggunaan
Nah setelah melakukan seluruh tahapan di atas berarti kamu sudah berhasil memasang fitur Syntax highlighter di blog kamu, sekarang bagaimana cara menggunakannya?
Mode Otomatis
Jika kamu ingin menggunakan Syntax highlighter di blogger agar kotak script menjadi berwarna warni secara otomatis silahkan gunakan kode seperti contoh di bawah ini
<pre><code>
<!-- Letakkan kode script anda -->
</code></pre>Info: Jika berhasil nantinya kotak script kamu akan tampil dalam bewarn warni dan kategori label script akan muncul di sudut samping box secara otomatis menurut jenis kode yang kamu tampilan di dalam box Script tersebut
Mode Manual
Jika ingin menampilkan kategori Script secara manual kamu bisa menggunakan kode seperti berikut ini
<pre><code class='Phyton'>
<!-- Letakkan kode Python anda -->
</code></pre>Info: Kategori Script tersebut tidak terbatas kamu bisa menampilkan kata atau kalimat apa saja semisal link, url, text, dan sebagainya seperti class di atas, semoga bermanfaat
Posting Komentar