Cara Menciptakan Syntax Highlighter Programan (Kotak Script) Di Blogger

Syntax Highlighter adalah suatu daerah text area yang didalamnya berupa instruksi programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi Syntax Highlighter ini yaitu untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan Syntax Highlighter ini, Memudahkan pengunjung juga dalam copy&paste script, alasannya yaitu hanya double click otomatis script ter-sellect all semua. Dalam penggunaan Syntax Highlighter ini, anda diharuskan sudah hapal ibarat apa instruksi CSS, HTML, Java Script dan lain-lain alasannya yaitu dalam penggunaan ini instruksi CSS ya harus instruksi CSS, dilarang dipasang instruksi CSS dengan HTML.

Screenshooot :

Setelah membaca pengertian dan fungsi Syntax Highlighter mungkin anda tertarik untuk mencoba memasang Syntax Highlighter ini. Kalau begitu, silakan ikuti langkah-langkah berikut ini.

Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian login

2. Dashboard - Template

3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>

2. Copy&paste instruksi berikut ini, dan letakkan diatas instruksi ]]></b:skin> atau </style>

/* CSS Sintax Haighlighter */ pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;position:relative;border-radius:4px;max-height:500px;} pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;} pre::after{content:'</>';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out;} code{font-family:Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px;} pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;} code .token.punctuation{color:#ccc;} pre code .token.punctuation{color:#fafafa;} code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777;} code .namespace{opacity:.8;} code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56;} code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad;} pre code .token.selector,pre code .token.attr-name{color:#fafafa;} pre code .token.string{color:#40ee46;} code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc;} code .token.operator{color:#1887dd;} code .token.atrule,code .token.attr-value{color:#009999;} pre code .token.atrule,pre code .token.attr-value{color:#1baeb0;} code .token.keyword{color:#e13200;font-style:italic;} code .token.comment{font-style:italic;} code .token.regex{color:#ccc;} code .token.important{font-weight:bold;} code .token.entity{cursor:help;} pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} .comments pre{padding:10px 10px 15px 10px;background:#2c323c;} .comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none;} .comments pre::after{font-size:11px;} .comments pre code{color:#eee;} .comments pre.line-numbers{padding-left:10px;} pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;} pre.line-numbers > code{position:relative;} .line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;} .line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;} .line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;} pre[data-codetype='HTML']:before{background-color:#3cc888;} pre[data-codetype='CSS']:before{background-color:#00a1d6;} pre[data-codetype='jQuery']:before{background-color:#e5b460;} pre[data-codetype='Javascript']:before{background-color:#75d6d0;}

3. Temukan instruksi </body>
4. Copy&paste instruksi berikut ini, dan letakkan diatas instruksi </body>

<script src='https://rawgit.com/hilmay619/pribadi/master/sintax.js' type='text/javascript'/> <script> $(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;); Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)}) </script> <script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;); for (var i = 0; i &lt; pres.length; i++) { pres[i].addEventListener(&quot;dblclick&quot;, function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script>

5. Simpan Template!

Cara Menggunakan Syntax Highlighter Programan (Kotak Script) di Blogger

Untuk Menggunakan Syntax Highlighter ini untuk instruksi HTML, Java Script, JQuery anda diharuskan Parse HTML terlebih dahulu dan untuk kode CSS tidak memerlukan di parse HTML. - Parse HTML

1. Silakan anda buat Entri baru
2. Pilih HTML bukan Compose
3. Masukan instruksi yang goresan pena warna merah, sesuai perintah. Misalnya : CSS, pasang dengan instruksi CSS.

<pre data-codetype="HTML" title="Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger"><code class="language-markup">...KETIK CODE HTML DISINI .... </code></pre> <pre data-codetype="CSS" title="Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger"><code class="language-css">...KETIK CODE CSS DISINI ....</code></pre>  <pre data-codetype="Javascript" title="Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger"><code class="language-javascript">...KETIK CODE Javascript DISINI ....</code></pre> <pre data-codetype="jQuery" title="Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger"><code class="language-javascript">...KETIK CODE jQuery DISINI ....</code></pre>

Demikianlah Tutorial Blogger kali ini, kalau terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, buatlah postingan dan pasang sesuai perintah contohnya instruksi CSS harus instruksi CSS jangan beda kode. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Syntax Highlighter Programan (Kotak Script) di Blogger