Beranda
Blog
Median Ui

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.

Kenapa patut di ketahi, kita tahu sendiri jika Artikel yang kita miliki mengandung banyak sekali tutorial yang mengwajibkan kita untuk menampilkan Artikel yang mengandung CSS, JS dan HTML tentunya donk biar pembaca Blog kita tahu bahwa kode yang kita lampirkan itu sebuah kode CSS, JS ataupun HTML.

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

Baiklah sebelum melanjutkan lebih jauh tentang tutorial kali ini admin akan membahas sedikit tentang apa itu Syntax Highlighter agar teman-teman lebih sedikit memahami, untuk itu mari simak berikut ini penjelasan mengenai apa itu Syntax Highlighter.

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

Namun sebelum melanjutkan ke-tutorial cara memasang Syntax Highlighter pada template Median UI, pastikan tersebut bahwa anda menggunakan perangkat laptop/FC atau jika anda menggunakan perangkat smartphone, sebaginya anda menggunakan keyboard android yang mendukung Ctrl F, agar memudahkan anda dalam mencari kode CSS, JS ataupun HTML.

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.
Karena admin menggunakan Syntax Highlighter yang mendukung penyortiran warna Copy code, maka admin akan menabahkan javascript dibawah ini, agar bisa menjalankan fungsinya dengan baik.
  • Silahkan anda cari kode </body> jika tidak menemukannya mungkin sudah di parse sehingga akan terlihat seperti ini &lt;!--</body>--&gt;&lt;/body&gt;
  • Lalu letakkan kode javascript dibawah ini di antara bawah </body> atau di atas &lt;!--</body>--&gt;&lt;/body&gt;
<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

Untuk kekurangannya sendri menurut admin menggunakan syntax highlighter memberikan terlalu banyak beban kepada blog, dalam artian Lemot/loging sangat ingin mengakses blog, karena admin menggunakan blogspot karena menggunakan javascript internal dan External.

Berbeda jika anda menggunakan wordpress, karena WordPress dapat anda menggunakan plagin yang dapat memungkinkan blog anda akan baik-baik saja.

Kesimpulan

Menarik kesimpulan dari cara memasang syntax highlighter pada blog/website, bagaimana menurut anda, jika sudah yakin bahwa ingin menggunakan syntax highlighter demikian itulah Tutorial yang dapat admin sampaikan.

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.

Posting Komentar