Hello sobat icloudZer kali ini admin bakalan menjabarkan mengenai bagiamana caranya membuat box pre code bewarnadi 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 secara otomatis di blogger adalah dengan membuat Syntax highlighter atau kotak script bewarna 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 sendiri adalah untuk menampilkan text kode yang menggunakan element tag pre code bisa berwarna 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 menggunakan Syntax highlighter
Kategori Script
Terlalau dan sangat istimewa pada Syntax highlighter yang admin Jabarkan kali ini karena dengan adanya 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
Biar kamunya ngak penasaran dengan bagaimana contoh tampilan dari box pre code bewarna di blogger menggunakan Syntax highlighter kamu bisa melihatnya 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 kotak pre code bewarna diblogger baca terus 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> denganbsyarat hapus dulu tag kode <style> pada kode CSS di atas
Kode Javascript
Kemudian 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 -->
</pre></code>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 -->
</pre></code>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
