Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog - Pada kesempatan kali ini aku akan menyebarkan tutorial cara memanga syntax Highlighter Berwarna atau biasa disebut kotak untuk menaruh arahan di blog.
Syntax Highlighter tentunya sudah tidak absurd lagi bagi sobat yang sudah sering bergelut dengan duni blogging, khususnya blog yang membahas perihal tutorial blogging, yang niscaya blog dengan niche ini tidak akan lepas dari sebuah kode.
Agar tampilan arahan yang sobat pasang di blog untuk suatu tutorial lebih terlihat keren dan cantik, sobat sanggup memakai arahan yang akan aku bagikan dibawah ini, arahan ini sudah dilengkapi dengan doble click to select, jadi pengunjung sobat tidak perlu lagi susah-susah memblok arahan yang sobat sediakan, cukup dua kali klik arahan sudah terselesksi secara otomatis.
Selain itu Syntax Highlighter yang akan aku bagikan dihiasi dengan warna, jadi setiap class dan velue akan terliha berbeda sesuai dengan warnanya masing-masing.
Berikut yakni fitur yang ada di syntax hughtlighter untuk blogger:
Lalu baaimana cara memasang Kode Syntax Highlighter Berwarna Di Blog? Silahkan ikuti tutorial dibawah ini dengan teliti.
Pertama silahkan masuk ke Blogger Dashboard > Template > Edit HTML kemudian kopi arahan CSS dibawah ini sebelum <style> atau ]]></b:skin> untuk mempermudah mencarinya sobat sanggup memakai quickseacrh dengan cara klik CTRL+F di keyboard sobat.
Setelah itu sobat cari kode </body> lalu letakan tiga arahan dibawah ini sempurna diatas arahan tersebut
Setelah itu kemudian save template sahat.
Sampai disini sobat sudah berhasil memasang Kode Syntax Highlighter Berwarna Di Blog, dan sudah sanggup sahat. gunakan di blog sobat.
Namun masih ada satu step lagi, semoga arahan muncul di blog sobat, arahan tersebut yang dipasang perlu dipanggil, dengan cara memasang arahan HTML dibawah ini setiap sobat ingin memposting arahan di blog sobat,
Sampai disini tutorial Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog, semoga sanggup membantu sahabat semua. Sumber https://infoandrocodax.blogspot.com/
Syntax Highlighter tentunya sudah tidak absurd lagi bagi sobat yang sudah sering bergelut dengan duni blogging, khususnya blog yang membahas perihal tutorial blogging, yang niscaya blog dengan niche ini tidak akan lepas dari sebuah kode.
Agar tampilan arahan yang sobat pasang di blog untuk suatu tutorial lebih terlihat keren dan cantik, sobat sanggup memakai arahan yang akan aku bagikan dibawah ini, arahan ini sudah dilengkapi dengan doble click to select, jadi pengunjung sobat tidak perlu lagi susah-susah memblok arahan yang sobat sediakan, cukup dua kali klik arahan sudah terselesksi secara otomatis.
Selain itu Syntax Highlighter yang akan aku bagikan dihiasi dengan warna, jadi setiap class dan velue akan terliha berbeda sesuai dengan warnanya masing-masing.
Berikut yakni fitur yang ada di syntax hughtlighter untuk blogger:
- Highlight CSS language
- Highlight HTML5 language
- Highlight Javascript language
- Highlight jQuery language
- Highlights embedded languages
- Highlights inline code as well, not just code blocks
- Highlights nested languages
Lalu baaimana cara memasang Kode Syntax Highlighter Berwarna Di Blog? Silahkan ikuti tutorial dibawah ini dengan teliti.
Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog
Pertama silahkan masuk ke Blogger Dashboard > Template > Edit HTML kemudian kopi arahan CSS dibawah ini sebelum <style> atau ]]></b:skin> untuk mempermudah mencarinya sobat sanggup memakai quickseacrh dengan cara klik CTRL+F di keyboard sobat.
/* 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:"Double click to selection";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,'Andale Mono','Courier New',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:'Code';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 > 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 > span {display:block;counter-increment:linenumber;} .line-numbers-rows > span:before {content:counter(linenumber);color:#aaa;display:block; padding-right:0.8em;text-align:right;transition:350ms;} pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before, pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;} Setelah itu sobat cari kode </body> lalu letakan tiga arahan dibawah ini sempurna diatas arahan tersebut
<script src='https://cdn.rawgit.com/pekanan/script/60f9e6e7/prisma.js' type='text/javascript'/> <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> var pres = document.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } Setelah itu kemudian save template sahat.
Sampai disini sobat sudah berhasil memasang Kode Syntax Highlighter Berwarna Di Blog, dan sudah sanggup sahat. gunakan di blog sobat.
Namun masih ada satu step lagi, semoga arahan muncul di blog sobat, arahan tersebut yang dipasang perlu dipanggil, dengan cara memasang arahan HTML dibawah ini setiap sobat ingin memposting arahan di blog sobat,
<pre title="Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog" data-codetype ="HTMLku"><code class="language-markup"> ... YOUR HTML CODE HERE ... </code></pre> <pre title="Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog" data-codetype ="CSSku"><code class="language-css"> ... YOUR CSS CODE HERE ... </code></pre> <pre title="Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog" data-codetype ="JavaScriptku"><code class="language-javascript"> ... YOUR JAVASCRIPT CODE HERE ... </code></pre> <pre title="Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog" data-codetype ="JQueryku"><code class="language-javascript"> ... YOUR jQuery CODE HERE ... </code></pre> Sampai disini tutorial Cara Praktis Memasang Kode Syntax Highlighter Berwarna Di Blog, semoga sanggup membantu sahabat semua. Sumber https://infoandrocodax.blogspot.com/