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.
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/
<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/
Related Posts
- Cara Menciptakan Hidangan Navigasi Blog Horizontal Sederhana Salah satu ciri blog yang disukai oleh pengunjung yakni mempunyai hidangan navigasi yang terang sehingga tidak membingungkan pengunjung dalam menelu ...
- Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
- Cara Menciptakan Pengaruh Animasi Hujan Salju Pure Css Dan Javascript Di BlogMenambahkan imbas hujan salju pada blog sanggup mempercantik tampilan blog Anda, apalagi bulan desember ini selalu identik dengan animo salju di nega ...
- Cara Menciptakan Turn On / Off Lights Video Di BlogSering kita jumpai di beberapa blog atau website yang membahas perihal video menyerupai anime, film barat, drama korea, video streaming dan sejenisny ...
- Cara Menambahkan Emoticon Di Komentar Blogspot alasannya yaitu meningkatnya pengguna medsos (media sosial) dan ingin mennggunakan emoticon lucu untuk berkomentar diblog. Cara menambahkan emotica ...
- Cara Menciptakan Link Partner Di BlogCara Membuat link Partner Di Blog menyerupai yang di gunakan Blog yang lainya, kali ini aku akan Membuat sebuah artikel wacana Cara Membuat &nb ...
