Cara Pasang Syntax Highlight di Blogger

Cara Pasang Syntax Highlight di Blogger
Cara Pasang Sintax Highlight di Blogger - hari ini saya mau menulis tentang cara membuat snipet code yang kalian pasang di blog memiliki tampilan seperti yang ada pada software code editor seperti VScode(VisualStudioCode), Suplime Text, Atom ,DLL yang disebut juga dengan nama lain syntax highlight. Syntax Highlight pada blog tutorial coding saya rasa sangat membantu para pengunjung untuk lebih mudah dalam menyain dan membaca snipet code yang kalian ingin bagikan ke blog.

Tentunya dengan adanya syntax highlighter pengunjung dapat dengan mudah membaca code dan menyalinnya. Sebelumnya saya hanya menggunakan blockquote di beberapa tutorial yang membagikan source code di blog ini, namun untuk lebih mempermudah pembacaan code dan merapikan tampilan codenya saya juga sudah menerapkan "Prism syntax highlighter" ini di blog ini.

Brikut cara memasang Syntax Highlight di Blogger:

  • Login ke dashbord blog kalian dan masuk ke menu Template > edit HTML
  • Copykan css style dibawah ini, taruh diatas code </head>

 
<style>
/* CSS Prism Syntax Highlighter */
pre{padding:40px 10px 0px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:hidden;background-color:#2c323c;position:relative;max-height:500px}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#2c323c;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold}
pre::after{content:&#39;Click To Select All&#39;;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,&#39;Andale Mono&#39;,&#39;Courier New&#39;,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:&#39;Code&#39;;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 &gt; 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 &gt; span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows &gt; span:nth-child(even) { background-color: rgba(0,0,0,0.5);}
.line-numbers-rows &gt; span:before{content:counter(linenumber);color:#999;display:block;text-align:center;transition:350ms}
pre[data-codetype=&#39;CSSku&#39;]:before{background-color:#00a1d6}
pre[data-codetype=&#39;HTMLku&#39;]:before{background-color:#3cc888}
pre[data-codetype=&#39;JavaScriptku&#39;]:before{background-color:#75d6d0}
pre[data-codetype=&#39;JQueryku&#39;]:before{background-color:#e5b460}
</style> 

  • Lalu cek pada template kalian apakah sudah terdapat source jquery, seperti contohnya dibawah ini. Jika belum ada kalian bisa copykan source jquery ini dan taruh diatas code </head>, jika sudah ada silahkan kalian skip bagian ini.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> 

  • Selanjutnya Copykan script dibawah ini, taruh diatas code </body>

 
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='https://cdn.statically.io/gist/marwanto606/bf13fd1340cca9b25278304d31736a92/raw/a8d4524f63eb95bc6b6e300419e88d8e185887e4/prisma.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$('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)})
   var pres = document.getElementsByTagName("pre");
        for (var i = 0; i < pres.length; i++) {
          pres[i].addEventListener("click", function () {
            var selection = getSelection();
            var range = document.createRange();
            range.selectNodeContents(this);
            selection.removeAllRanges();
            selection.addRange(range);
          }, false);
        }
//]]>
</script>
</b:if>

  • Kemudian kalian klik save template,
  • Sekarang untuk menampilkan prism syntax highlight kalian tinggal mencopykan script html di bawah ini ke mode html di text editor blogger.
  • Saat kalian menulis artikel pada mode HTML pastikan code-code yang akan kalian sisipkan ke prism syntax highlight sudah di parse (bisa menggunakan TOOL ini), tujuannya agar script yang ditulis tampil sebagai text dan tidak di eksekusi sebagai code script oleh browser.

 
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> ... Kode CSS ... </code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> ... Kode Javascript ... </code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"> ... kode jQuery ... </code></pre>
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> ... kode HTML ... </code></pre>

  • Agar mempermudah saat kalian hendak membuat post baru, dan menggunakan Sintax highlight kalian bisa menambahkan sript html diatas kedalam entri blogger. klik Setelan > klik menu Posting,komentar, dan berbagi. Pada Template Entri klik tambah. kemudian masukkan script HTML diatas kedalamnya lalu klik simpan.
  • Selesai.

Screenshot Hasilnya
Cara Pasang Syntax Highlight di Blogger


prism syntax highlight
syntax highlighter blogger
blogger syntax highlight
Cara Memasang Syntax Highlighter di Postingan Blog
Membuat Syntax Highlighter Otomatis Terbaru di Blogger
Crayon Syntax Highlighter For Blogger
Membuat Syntax Highlighter di Blogger dengan CSS
Cara Memasang Syntax Highlighter di Blogger
Tutorial Cara Memasang Prism Syntax Highlighter di Blog
CARA INSTALL Syntax Highlighter di Blog
Cara Membuat Syntax Highlighter Keren di Blogger
Cara Memasang dan Membuat Kotak Syntax highlighter simpel Di Blog
Menambahkan Syntax Highlighter di Blogger dengan Prism
Cara Memasang Syntax Highlighter Keren di Blogger
Cara memasang dan menerapkan Syntax Highlighter di Postingan Blogger
Judul : Cara Pasang Syntax Highlight di Blogger
Penulis : Marwanto
Tanggal : 1/20/2020
Diskripsi : Cara Pasang Sintax Highlight di Blogger - hari ini saya mau menulis tentang cara membuat snipet code yang kalian pasang di blog memiliki ta...
Rating : 5
Category : Tags : Blogger
Baca Artikel Selanjutnya
Next
Baca Artikel Sebelumnya
Prev

1 Response to "Cara Pasang Syntax Highlight di Blogger"

  1. Cari Dana tambahan Saat Dirumah mari guys Bergabung aja sama kami >.<

    Minimal Deposit Rp. 25.000 & Whitdraw Rp. 50.000

    Deposit Dari
    Semua Bank Local Dan Dompet Digital
    (Ovo,Gopay,pulsa XL dan Telkomsel)

    * Hubungi Kami :
    Line : ItuBola
    WeChat : Itubola
    Whatsapp : +85517696120

    Promo Cashback 5%

    Link Alternatif ituBola:
    https://bit.ly/Bolatunda


    #agentjudionline #agenterpecaya #bolaonline #stayhome #covid19 #corona #indonesia #dirumahaja #agenjudionline #judionlineterpercaya #promojudionline #poker #domino99 #aduq #capsasusun #bandaronline #bandarbola #bandarterpercaya #sakong #bandar66 #perangbaccarat #openBO #vcs #openvcs #BO #cewekbugil #cewekseksi #goyanghot #tiktok #tiktokindonesia #karantina #karantinawilayah #karantinamandiri

    BalasHapus

Pembaca yang baik selalu meninggalkan jejaknya.
Dilarang berkomentar menggunakan LINK AKTIF.
Format Komentar :
Untuk quote [blockquote]TEKS[/blockquote]
Untuk kode [code]KODE YANG SUDAH DI PARSE[/code]

Show Parser Box