Dewa Blogger: Hasil penelusuran untuk memasang-prism-syntax-highlighter-di-blogger

Halaman

    Social Items

Home / Hasil penelusuran untuk memasang-prism-syntax-highlighter-di-blogger

Memasang Prism Syntax Highlighter di Blogger - Bagi Anda yang sering membuatkan tutorial tentunya sudah tidak absurd lagi dengan istilah Syntax Highlighter.

 Syntax Highlighter ini pertama kali aku lihat di blog Kang Ismet tempatnya membuatkan tutorial seputar blogger dan sekarang aku telah menerapkan instruksi tersebut sebagai fitur pendukung blog ini. Kemudian aku padukan dengan fitur penomoran yang didapat dari blog Kompi Ajaib.

Ok eksklusif saja, silahkan buka Blogger > Template > Edit HTML > Kemudian salin dan terapkan instruksi di bawah ini sebelum </style>

/* CSS Prism Syntax Highlighter */ pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;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:'Double click to selection';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} pre:hover::after{opacity:0;top:-8px;visibility:visible} 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='CSSku']:before{background-color:#00a1d6} pre[data-codetype='HTMLku']:before{background-color:#3cc888} pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0} pre[data-codetype='JQueryku']:before{background-color:#e5b460}

Setelah itu simpan 3 instruksi di bawah ini sempurna sebelum </body> atau </head>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/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>

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

Simpan template.


Selanjutnya ketika Anda menciptakan post baru, terapkan instruksi pemanggil di bawah ini pada postingan Tab HTML

<pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="HTMLku"><code class="language-markup"> ... instruksi HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="CSSku"><code class="language-css"> ... instruksi CSS di sini ... </code></pre> <pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="JavaScriptku"><code class="language-javascript"> ... instruksi JavaScript di sini ... </code></pre> <pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="JQueryku"><code class="language-javascript"> ... instruksi jQuery di sini ... </code></pre>


Source : https://sangdewablogger.blogspot.com//search?q=memasang-prism-syntax-highlighter-di-blogger
Source : https://sangdewablogger.blogspot.com//search?q=memasang-prism-syntax-highlighter-di-blogger

Memasang Prism Syntax Highlighter Di Blogger

Bagi teman yang sering mengembangkan tutorial blogger tentunya sudah tidak absurd lagi dengan pe Simple Pre Code dengan Seleksi Bagi teman yang sering mengembangkan tutorial blogger tentunya sudah tidak absurd lagi dengan penerapan arahan baik itu HTML, CSS, JavaScript ataupun jQuery di postingan. Dan sebagai wadah daerah menerapkan kode-kode tersebut pada postingan, teman perlu membungkus setiap arahan tersebut dengan tag pre.

Contoh deklarasi arahan HTML yang dibungkus dengan tag pre

<pre><code><button>Press Me!</button></code></pre>

Contoh di atas merupakan arahan HTML yang sebelumnya telah diparse dan pola sederhana dari penerapan tag pre. Tampilan dari tag pre sebenarnya dapat teman kembangkan biar tampilannya berbeda dengan yang biasa. Seperti pada postingan yang pernah Saya bagikan dengan menambahkan plug in / script Prism Syntax Highlighter di Blogger.

Memasang Prism Syntax Highlighter di Blogger

Nah disini Saya akan mencoba mengembangkan konsep tag pre yang lebih sederhana tanpa membutuhkan script eksternal yang dapat teman terapkan pada blog.

Ok eksklusif saja silakan ikuti langkah sederhana berikut ini :

Buka Blogger > Template > Klik Edit HTML > Simpan arahan CSS di bawah ini sebelum ]]></b:skin> atau </style>

/* CSS Simple Pre Code */ pre {     background: #fff;     white-space: pre;     word-wrap: break-word;     overflow: auto; }  pre.code {     margin: 20px 25px;     border: 1px solid #d9d9d9;     border-radius: 2px;     position: relative;     box-shadow: 0 1px 1px rgba(0,0,0,.08); }  pre.code label {     font-family: sans-serif;     font-weight: normal;     font-size: 13px;     color: #444;     position: absolute;     left: 1px;     top: 16px;     text-align: center;     width: 60px;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     pointer-events: none; }  pre.code code {     font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;     display: block;     margin: 0 0 0 60px;     padding: 15px 16px 14px;     border-left: 1px solid #d9d9d9;     overflow-x: auto;     font-size: 13px;     line-height: 19px;     color: #444; }  pre::after {     content: "double click to selection";     padding: 0;     width: auto;     height: auto;     position: absolute;     right: 18px;     top: 14px;     font-size: 12px;     color: #aaa;     line-height: 20px;     overflow: hidden;     -webkit-backface-visibility: hidden;     transition: all 0.3s ease; }  pre:hover::after {     opacity: 0;     visibility: visible; }  pre.code-css code {     color: #0288d1; }  pre.code-html code {     color: #558b2f; }  pre.code-javascript code {     color: #f57c00; }  pre.code-jquery code {     color: #78909c; }

Berikutnya simpan script di bawah ini sebelum tag epilog </body>

<script type='text/javascript'> //<![CDATA[ //Pre Auto Selection $('i[rel="pre"]').replaceWith(function() {     return $('<pre><code>' + $(this).html() + '</code></pre>'); }); var pres = document.querySelectorAll('pre,kbd,blockquote'); 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); } //]]> </script>

Script di atas berfungsi untuk menyeleksi otomatis setiap teman melaksanakan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

Setelah itu simpan template.

Untuk penerapan pada postingan, silakan tambahkan arahan di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... arahan HTML (yang telah diparse) di sini ...</code></pre>  <pre class='code code-css'><label>CSS</label><code>... arahan CSS di sini ...</code></pre>  <pre class='code code-javascript'><label>JS</label><code>... arahan JavaScript di sini ...</code></pre>  <pre class='code code-jquery'><label>Jquery</label><code>... arahan jQuery di sini ...</code></pre>


Jika teman mengingkinkan tampilan tag pre dengan warna gelap, silakan gunakan arahan ini

/* CSS Simple Pre Code */ pre {     background: #333;     white-space: pre;     word-wrap: break-word;     overflow: auto; }  pre.code {     margin: 20px 25px;     border-radius: 4px;     border: 1px solid #292929;     position: relative; }  pre.code label {     font-family: sans-serif;     font-weight: bold;     font-size: 13px;     color: #ddd;     position: absolute;     left: 1px;     top: 15px;     text-align: center;     width: 60px;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     pointer-events: none; }  pre.code code {     font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;     display: block;     margin: 0 0 0 60px;     padding: 15px 16px 14px;     border-left: 1px solid #555;     overflow-x: auto;     font-size: 13px;     line-height: 19px;     color: #ddd; }  pre::after {     content: "double click to selection";     padding: 0;     width: auto;     height: auto;     position: absolute;     right: 18px;     top: 14px;     font-size: 12px;     color: #ddd;     line-height: 20px;     overflow: hidden;     -webkit-backface-visibility: hidden;     transition: all 0.3s ease; }  pre:hover::after {     opacity: 0;     visibility: visible; }  pre.code-css code {     color: #91a7ff; }  pre.code-html code {     color: #aed581; }  pre.code-javascript code {     color: #ffa726; }  pre.code-jquery code {     color: #4dd0e1; }


Demikian mengenai penerapan Simple Pre Code dengan Seleksi, semoga bermanfaat.

Simple Pre Code Dengan Seleksi

Langganan: Postingan (Atom)