Beranda
Blogger
JavaScript

Cara Membuat Stylish Codebox untuk Postingan Blog

Jika Anda membagikan Kode kepada pengunjung, Codebox ini akan membantu Anda melakukannya, Codebox ini juga berisi tombol untuk menyalin Kode tersebut.
Admin

Jika Anda pernah memberikan kode kepada pengunjung, Anda pasti membutuhkan Codebox. Itulah sebabnya dalam artikel ini kami akan membuat Codebox yang stylish. Dengan bantuannya, Anda dapat memberikan kode kepada pengunjung Anda dalam sebuah Stylish Codebox. Tombol salin juga telah ditambahkan, sehingga kode dapat disalin dengan mengklik tombol ini.

Codebox for Blog Posts
Codebox for Blog Posts | Fineshop Design

Sebelum kita mulai, mari kita lihat Demo-nya.

Bagaimana cara membuat Stylish Codebox?

Membuat Codebox untuk Postingan Blog tidak memerlukan banyak pengetahuan tentang HTML, CSS, atau JS karena saya sudah merancangnya untuk Anda. Yang perlu Anda lakukan adalah mengimplementasikan kode-kode tersebut di tempat yang tepat dalam XML Tema Blogger Anda.

Penting!Sebelum kita mulai menambahkan kode dalam XML, saya sarankan Anda untuk mencadangkan tema Anda saat ini. Jika terjadi masalah, Anda dapat memulihkannya nanti.

  1. Pertama-tama Masuk ke Dashboard Blogger Anda.
  2. Pada Dasbor Blogger, klik Tema.
  3. Klik ikon panah bawah di samping tombol 'Sesuaikan'.
  4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  5. Sekarang cari kode </head> dan tempel Kode CSS berikut tepat di atasnya.

    Jika templat Anda memiliki fitur mode gelap, dan Anda menginginkan warna yang berbeda saat mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan. Setiap templat dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan. Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap templat Anda.

    <style>/*<![CDATA[*/
pre, .syntax-box {
  --background: #fdfdfd;
  --color: inherit;
  --border: 1px solid #e6e6e6;
  --border-radius: 4px;
  --padding: 15px;
  --font-size: 13px;
  --font-family: "JetBrains Mono", monospace;
  --line-height: 1.5;
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
  --icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
  
.dark-mode pre, .dark-mode .syntax-box {
  --background: #252526;
  --border: 1px solid rgba(255,255,255,.15);
}

.syntax-box,pre{background-color:var(--background);color:var(--color);border:var(--border);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);margin:30px 0}
pre{font-family:var(--font-family)}
pre code{padding:var(--padding);font-family:inherit;position:relative;white-space:pre;overflow-x:auto;margin:0;background:0 0}
.syntax-box{display:flex;min-height:calc(40px + var(--padding) * 2)}
.syntax-content{position:relative;overflow:hidden;width:100%}
.syntax-box pre{background:0 0;color:inherit;border:none;border-radius:unset;line-height:inherit;margin:0}
.syntax-lines{counter-reset:syntax-line;flex-shrink:0;display:flex;flex-direction:column;padding:var(--padding) 0;border-right:var(--border);line-height:var(--line-height);text-align:right;font-family:var(--font-family)}
.syntax-lines>::before{counter-increment:syntax-line;content:counter(syntax-line);padding:0 8px;opacity:.78}
.syntax-copy{position:absolute;top:var(--padding);right:var(--padding);display:inline-flex;align-items:center;background-color:var(--background);color:inherit;outline:0;padding:0;border:var(--border);border-radius:4px;cursor:pointer;opacity:0;transition:opacity .25s;z-index:3}
.syntax-box:hover .syntax-copy{opacity:1}
.syntax-copy::after{content:"";width:40px;height:40px;opacity:1;background-image:var(--icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat}
.syntax-copy:disabled::before{content:attr(data-copied);padding:0 10px;opacity:.8;border-right:var(--border)}
.syntax-copy:disabled::after{background-image:var(--icon-copied)}
/*]]>*/</style>
  6. Sekarang tambahkan kode JavaScript berikut tepat di atas tag </body>. Jika Anda tidak menemukannya, kemungkinan kode tersebut sudah diurai, yaitu &lt;/body&gt;. 
    <script type='module'>/*<![CDATA[*/
/**
 * Codebox by Fineshop Design
 * License: MIT
 */
!(({selector:a,texts:{copy:b,copied:c}})=>{const d=async a=>{if("string"!=typeof a)throw new TypeError("Argument 1 must be a string.");if("clipboard"in navigator)return await navigator.clipboard.writeText(a),a;const b=document.createElement("textarea");b.setAttribute("style","position: fixed; left: 100%; width: 0; height: 0; opacity: 0"),b.textContent=a,document.body.appendChild(b),b.focus(),b.select();const c=!!document.execCommand("copy");if(b.remove(),c)return a;throw new Error("Failed to copy text.")},e=document.querySelectorAll(a);e.forEach(a=>{const e=a.querySelector("code");if(e){const f=e.innerText.split(/\r|\r\n|\n/),g=document.createElement("div");g.className="syntax-lines",g.innerHTML=f.map(()=>"<span></span>").join("");const h=document.createElement("div");h.className="syntax-content";const i=document.createElement("button");i.type="button",i.className="syntax-copy",i.title=b,i.setAttribute("data-copy",b),i.setAttribute("data-copied",c),i.addEventListener("click",()=>{i.disabled=!0,i.classList.add("copied"),d(e.innerText),setTimeout(()=>{i.disabled=!1,i.classList.remove("copied")},3e3)});const j=document.createElement("div");j.className="syntax-box",a.insertAdjacentElement("beforebegin",j),h.appendChild(a),h.appendChild(i),j.appendChild(g),j.appendChild(h)}})})({selector:"pre:not(.no)",texts:{copy:"Copy",copied:"Copied"}});
/*]]>*/</script>
  7. Simpan perubahan dengan mengklik ikon .
  8. Selesai! Sekarang gunakan Kode HTML berikut di Postingan Blog Anda di mana pun Anda ingin menambahkan Codebox. 
    <pre><code>escaped_code_here</code></pre>

    Jangan lupa untuk menggunakan HTML yang telah diparse! Jika Anda membutuhkan tool Parse HTML silahkan klik disini.
    Atau dengan mengganti kode: & menjadi &amp;, < menjadi &lt;, > menjadi &gt;

Kesimpulan

Ini semua tentang pembuatan Kotak Kode untuk Postingan Blog. Semoga Anda menikmati artikel ini. Silakan bagikan artikel ini. Dan jika Anda mengalami masalah di bagian mana pun atau memiliki pertanyaan, silakan tanyakan kepada kami di kolom komentar. Terima kasih!

Copyright (c):
fineshopdesign.com

Posting Komentar