Cara Install Syntax code highlighter pada Blogger

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
December 08, 2017

Selamat siang soba blogger kali ini kami akan share cara Install Syntax Code highlighter di Blogger. Bagi anda yang sering berbagi tutorial tentunya sudah mengenal istilah Syntax Highlighter.

Banyak teman saya meminta saya untuk berbagi kode ini dengan highlighter. Jika Anda ingin berbagi tutorial tentang blog dengan banyak kode, Anda harus memerlukan kode yang stabil untuk berbagi kode tersebut agar lebih mengerti. Jadi teman, sekarang beri stat tutorialnya. Ikuti saja langkah-langkah di bawah ini untuk menginstal kode sintaks stabilo untuk blogger.

Saya sendiri menginstal suntax code stabilo ini karena berbagai pertimbangan di antaranya mempengaruhi kecepatan dari blog saya.

Syntax Code highlighter Untuk Blogger

Kode highlighter adalah bagian terpenting blogger yang berbagi trik blog atau tipenya. Siapa yang mencari prism Code Highlighting trick untuk blogger tutorial ini hanya untuk anda.

Prism melakukan yang terbaik untuk mendorong praktik authoring yang baik. Oleh karena itu, ini hanya bekerja dengan elemen <code>, karena menandai kode tanpa elemen <code> secara semantik tidak valid.

Menurut spesifikasi HTML5, cara yang disarankan untuk mendefinisikan bahasa kode adalah kelas bahasa-xxxx, yang digunakan Prism. Namun, untuk mempermudah, Prism berasumsi bahwa definisi bahasa ini diwariskan.

Oleh karena itu, jika beberapa elemen <code> memiliki bahasa yang sama, Anda dapat menambahkan kelas bahasa-xxxx pada salah satu leluhur bersama mereka. Dengan cara ini, Anda juga dapat menentukan bahasa default keseluruhan dokumen, dengan menambahkan kelas bahasa-xxxx pada elemen <body> atau <html>. - Prism.com

Fitur penting dari kode prisma highlighter untuk blogger

  • Highlight bahasa CSS
  • Highlight  bahasa HTML5
  • Highlight  bahasa Javascript
  • Highlight  bahasa jQuery
  • Highlight  bahasa yang disematkan (misalnya CSS di dalam HTML, JavaScript di dalam HTML)
  • Highlight  kode inline juga, tidak hanya blok kode
  • Highlight bahasa bersarang (CSS di HTML, JavaScript di HTML

Instal prism kode injeksi highlighter  di Blogger. Gunakan kode mengagumkan ini di blog blogspot. Kode highlighter  Syntax bisa meningkatkan kecantikan blog anda. Kode prism highlighter kode warna cerah yang pernah ada. Jika Anda ingin memasang kode prisma ini highlighter  di blogger, Ikuti langkahnya dibawah ini.

Langkah 1. Pertama-tama buka Dasbor Blogger> Template> Edit HTML dan salin semua kode dibawa ini, lalu tempatkan di bawah Kode CSS sebelum </style>

/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;}
pre::after {content:&quot;Double click to selection&quot;;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;line-height:16px;color:#aaa;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#aaa;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#bbb;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
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:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:&#39;Code&#39;;font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers &gt; code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows &gt; span {display:block;counter-increment:linenumber;}
.line-numbers-rows &gt; span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype=&quot;CSSku&quot;]:before,pre[data-codetype=&quot;HTMLku&quot;]:before,
pre[data-codetype=&quot;JavaScriptku&quot;]:before,pre[data-codetype=&quot;JQueryku&quot;]:before{background-color:#fff;}

Langkah 2. Setelah itu simpan 3 kode dibawah ini sebelum </body>

JavaScript
<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.js' type='text/javascript'/>

jQuery
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

jQuery
<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>

Langkah 3. Save Template

Pasti anda bertanya apakah kodenya otomatis terbaca sebagai highlighter (berwarna dan keren), Tentunya tidak anda harus menempatkan kode dibawah ini setiap anda memposting blog di post HTML Tab.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... HTML CODE ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... CSS CODE  ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... JAVASCRIPT CODE  ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... jQuery CODE ... </code></pre>

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda semua, Jangan lupa share keteman sesama blogger dan jadikan postingan anda menjadi berwarna.


Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER