Check out new Codebox with Dark Mode and Copy Buttons.
Hello! Welcome to Fineshop Blog. Hope you are doing well.
If you have ever provided codes to your visitors, then you must have needed a Codebox. That is why in this article we will create stylish Codebox. With its help, you will be able to provide codes to your visitors in a Stylish Codebox. A copy button has also been added to it, so the codes can be copied by clicking on this button.
|
| © Fineshop Design | Codebox for Blog Posts |
Before we start let's take a look at its Demo.
How to create Stylish Codebox?
Creating Codebox for Blog Posts will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code </head> and paste the following CSS Codes just above to it.
If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.
<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>Step 6: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.
<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>Step 7: Save the changes by clicking on this icon
That's done! Now use the following HTML Codes in your Blog Posts wherever you want to add Codebox.
<pre><code>escaped_code_here</code></pre>Don't forget to use escaped HTML!
Replace & with &, < with <, > with >
Terms of Use
If you want to use this Codebox in your posts, please don't remove the attributes from the codes, it will not be visible on your website.
If you want to rewrite an article on this Codebox by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.fineshopdesign.com. If you rewrite without Reference, Legal Actions will be taken.
Conclusion
This is all about creating the Codebox for Blog Posts. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!
© Copyright:
www.fineshopdesign.com