Cara Memasang Syntax Highlighter di Postingan Template Median Ui
ShayTekno.com - Berbicara tentang cara memasang Syntax Highlighter pada template Median UI, memang patut di ketahui oleh sebagai blogger Niche tutorial yang membahas tutorial seputar CSS, JS dan HTML pada Artikelnya blognya.
Contohnya saja milik admin sendiri.
Baca juga: Kumpulan Tutorial Edit Template Median Ui Versi 1.5 ataupun 1.4
Apa itu Syntax Highlighter
Syntax Highlighter merupakan Penyorotan sintaksis sebagai salah satu fitur penyunting teks yang bisanya di gunakan oleh bahasa pemrograman, atau juga bisa di sebut bahasa markah seperti HTML, CSS, JavaScript serta memungkinkan fitur tersebut akan memberikan skrip berwana, sebagai penanda bahwa format tersebut sebuah merupakan sebuah kode markah (JSS, JS, HTML).Bagaimana sudah sedikit memahami bukan apa itu Syntax Highlighter, baiklah jika sudah baiklah, mari kita lanjutkan, tentang bagaimana Cara Memasang Syntax Highlighter CSS, JS dan HTML Pada Template Median UI yang teman-teman gunakan berikut ini.
Tutorial Cara Memasang Syntax Highlighter Pada Template Median UI
Karena pembahasan kali ini akan menambah kode CSS, serta javascript pada template Median UI yang teman-teman gunakan.
Baiklah jika sudah mari simak panduan selengkapnya cara memasang Syntax Highlighter pada template Median UI Versi 1.5 ataupun versi. 1,4 dan template imagz dan fletro secara mudah dan cepat Berikut ini.
Cara Memasang Syntax Highlighter
- Buka Dasbor Blogger.
- Pilih menu TEMA.
- Lalu pilih Edit HTML.
- Lalu silahkan anda gunakan Ctrl F.
- Lalu silahkan anda cari kode ]]></b:skin>
- Lalu letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
/* syntax highlighter */
.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.hljs,.hljs-subst,.hljs-tag{color:#eaebec}
.hljs-emphasis,.hljs-strong{color:#a8a8a2}
.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}
.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}
.hljs-strong{font-weight:700}
.hljs-emphasis{font-style:italic}
.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f15a5a}
.hljs-attribute,.hljs-symbol{color:#66d9ef}
.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}
.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}
.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}
.code-badge-copy-icon{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M391.89,450H163a50.17,50.17,0,0,1-50.11-50.11V98.11A50.17,50.17,0,0,1,163,48h150.1a15,15,0,0,1,10.61,4.39L437.61,166.27A15,15,0,0,1,442,176.88v223A50.17,50.17,0,0,1,391.89,450ZM163,78a20.13,20.13,0,0,0-20.11,20.11V399.89A20.13,20.13,0,0,0,163,420H391.89A20.13,20.13,0,0,0,412,399.89V183.09L306.91,78Z' fill='%23c6c9ce'/%3E%3Cpath d='M427,191.88H348.23a50.17,50.17,0,0,1-50.11-50.11V63a15,15,0,0,1,30,0v78.77a20.13,20.13,0,0,0,20.11,20.11H427a15,15,0,0,1,0,30Z' fill='%23c6c9ce'/%3E%3C/svg%3E");background-size:55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px -5px -14px}
.code-badge > .code-badge-check-icon{background:green}
.code-badge-check-icon{cursor:pointer;padding:0 7px;margin:-5px 0 -5px -5px;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=');background-size:100% 100%}
#copyy i.code-badge-copy-icon:before{content:'Copy Code';font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;visibility:hidden;opacity:0;transition:all .2s ease}
#copyy:hover i.code-badge-copy-icon::before{visibility:visible;opacity:1;top:-33px}
#copyy i.code-badge-copy-icon:after{content:'';position:absolute;top:0;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;opacity:0;visibility:hidden;transition:all .2s ease}
#copyy:hover i.code-badge-copy-icon::after{visibility:visible;opacity:1;top:-9.8px}
#copyy i.code-badge-check-icon:before{content:'Code Copied!';font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;transition:all .2s ease}
#copyy i.code-badge-check-icon:after{content:'';position:absolute;top:-9.8px;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;transition:all .2s ease}
- Jika sudah klik Simpan.
- Silahkan anda cari kode </body> jika tidak menemukannya mungkin sudah di parse sehingga akan terlihat seperti ini <!--</body>--></body>
- Lalu letakkan kode javascript dibawah ini di antara bawah </body> atau di atas <!--</body>--></body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js'/>
<script>/*<![CDATA[*/
!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e,!0):function(e){if(!e.document)throw new Error("A window with a document is required");return o(e)}:o(e)}("undefined"!=typeof window?window:this,function(y,e){if("boolean"!=typeof o)var o=!1;function t(e){var o,m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function t(){m.loadDelay?setTimeout(n,loadDelay):n()}function n(){if(!document.querySelector(m.templateSelector)){var e=document.createElement("div");e.innerHTML=function(){for(var e=["<style>","@media print {"," .code-badge { display: none; }","}"," .dark-mode .code-badge {"," background: rgba(78,95,109,.10);"," }"," .code-badge-pre {"," position: relative;"," }"," .code-badge {"," display: flex;"," flex-direction: row;"," white-space: normal;"," background: rgba(88,101,111,.63);"," color: #333;"," font-size: 0.875em;"," opacity: 0.5;"," transition: opacity linear 0.5s;"," border-radius: 0 4px 0 4px;"," padding: 5px 8px 5px 8px;"," position: absolute;"," right: 0;"," top: 0;"," }"," .code-badge.active {"," opacity: 0.8;"," }",""," .code-badge:hover {"," opacity: .95;"," }",""," .code-badge a,"," .code-badge a:hover {"," text-decoration: none;"," }",""," .code-badge-language {"," margin-right: 10px;"," font-weight: 600;"," color: goldenrod;"," }"," .fa.text-success:{ color: limegreen !important }","</style>",'<div id="CodeBadgeTemplate" style="display:none">',' <div class="code-badge">',' <div class="code-badge-language" >{{language}}</div>',' <div id="copyy" title="Salin Code">',' <i class="{{copyIconClass}}"></i></i></a>'," </div>"," </div>","</div>"],o="",t=0;t<e.length;t++)o+=e[t]+"\n";return o}();var o=e.querySelector("style"),t=e.querySelector(m.templateSelector);document.body.appendChild(o),document.body.appendChild(t)}for(var n=document.querySelector(m.templateSelector).innerHTML,c=document.querySelectorAll("pre>code.hljs"),a=0;a<c.length;a++){var r=c[a];if(!r.querySelector(".code-badge")){for(var d="",l=0;l<r.classList.length;l++){var i=r.classList[l];if("language-"===i.substr(0,9)){d=r.classList[l].replace("language-","");break}if("lang-"===i.substr(0,5)){d=r.classList[l].replace("lang-","");break}if(!d)for(var s=0;s<r.classList.length;s++)if("hljs"!=r.classList[s]){d=r.classList[s];break}}"ps"==(d=d?d.toLowerCase():"text")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&(d="foxpro");var p=n.replace("{{language}}",d).replace("{{copyIconClass}}",m.copyIconClass).trim(),u=document.createElement("div");u.innerHTML=p,u=u.querySelector(".code-badge");var g=r.parentElement;g.classList.add("code-badge-pre"),m.copyIconContent&&(u.querySelector(".code-badge-copy-icon").innerText=m.copyIconContent),g.insertBefore(u,r)}}document.querySelector(m.contentSelector).addEventListener("click",function(e){return e.srcElement.classList.contains("code-badge-copy-icon")&&(e.preventDefault(),e.cancelBubble=!0,function(e){var o=e.srcElement.parentElement.parentElement.parentElement,t=o.querySelector("pre>code"),n=t.textContent||t.innerText;m.onBeforeCodeCopied&&(n=m.onBeforeCodeCopied(n,t));var c=document.createElement("textarea");c.value=n.trim(),document.body.appendChild(c),c.style.display="block",y.document.documentMode?c.setSelectionRange(0,c.value.length):c.select();document.execCommand("copy"),document.body.removeChild(c),function(e){var o=m.copyIconClass.split(" "),t=m.checkIconClass.split(" "),n=e.querySelector(".code-badge-copy-icon");n.innerText=m.checkIconContent;for(var c=0;c<o.length;c++)n.classList.remove(o[c]);for(c=0;c<t.length;c++)n.classList.add(t[c]);setTimeout(function(){n.innerText=m.copyIconContent;for(var e=0;e<t.length;e++)n.classList.remove(t[e]);for(e=0;e<o.length;e++)n.classList.add(o[e])},2e3)}(o)}(e)),!1})}o=e,Object.assign(m,o),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()}y.highlightJsBadge=t,y.module&&y.module.exports&&(y.module.exports.highlightJsBadge=t),o&&t()});
document.addEventListener("DOMContentLoaded", (event) => {
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
var options = {
contentSelector: ".post-content",
loadDelay:0,
copyIconClass: "code-badge-copy-icon",
checkIconClass: "code-badge-check-icon",
onBeforeTextCopied: function(text, codeElement) {
return text;
}
};
window.highlightJsBadge(options);
});
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
/*]]>*/</script
- Jika sudah klik simpan.
Keterangan penggunaan Syntax Highlighter
Berikut ini ada 3 kode markah [JSS, JS, HTML] kode pemanggilan yang bisa Anda gunakan di setiap artikel yang ingin anda berikan syntax Highlighter.
<pre><code class="html">
kode HTML masukan seperti ini.
</code></pre>
<pre><code class="javascript">
kode JavaScript masukan disini
</code></pre>
<pre><code class="css">
kode CSS formatnya seperti ini.
</code></pre>
keuntungan & kekurangan Menggunakan Syntax highlighter
Setalah mengetahui langkah-langkah cara memasang syntax highlighter pada blog yang kita bahas di awal, kurang afdhol kalau admin tidak menyampaikan kekurangan serta kelebihan datin menggunakan syntax highlighter, untuk itu berikut ini adalah beberapa keuntungan dan kekurangan yang menurut admin bisa sampaikan.1. Kelebihannya Menggunakan Syntax Highlighter
- Adapun kelebihan menggunakan syntax highlighter yang yaitu memberikan Penyorotan kode dan dapat membedakan antara kode JS, JSS dan JavaScript bagi pembaca blog.
- Memberikan tampilan yang menarik simpel dan rapi terhadap markah.
- Meningkatkan SEO blog, Kenapa demikian karena Google akan tahu bahwa kode yang kita tulisan kan bukan di baca sebuah teks, akan di baca sebagai markah [JSS,JS,HTML].
- Terlihat profesional, dan mendapatkan nilai-nilai di mata pengunjung blog.
2. Kekurangan Menggunakan Syntax Highlighter
Berbeda jika anda menggunakan wordpress, karena WordPress dapat anda menggunakan plagin yang dapat memungkinkan blog anda akan baik-baik saja.
Kesimpulan
Semoga artikel kali ini dapat membantu Anda dan bermanfaat buat anda dan teman-teman, jika ada pertanyaan terkait pembahasan di atas kalian bisa bertanya langsung melalui kolom komentar yang tersedia Dibawah ini. Selamat mencoba.
Post a Comment