Effortlessly Embed Source Code with Auto Copy

Hey there!

Are you tired of manually formatting and copying source code for your blog?

Well, we've got good news for you!

With our simple guide, you can now effortlessly embed source code with an auto copy function into your blog, adding a stylish touch and saving time.

Let's get started!

$ads={1}

Example of affiliate box

.affiliate-box {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

CSS code for Source Code

If you're using a different blogging platform, you may need to adjust the CSS code accordingly.

However, since this guide is specifically written for Blogger users, we'll focus on explaining how to paste the CSS code in Blogger.

Click "Edit HTML" under "Themes" in the Blogger sidebar.

]]></b:skin>

Paste the following code before "]]></b:skin>".

*If you copy and paste (Ctrl+V) the code you want to find with Ctrl+F, you can easily find it. For Mac, Ctrl becomes "Command".

pre{
    font-family:Monaco, "Andale Mono", "Courier New", Courier, monospace;
    background-color:#2c3e50;
    background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:-moz-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:-ms-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:-o-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    -webkit-background-size:100% 50px;
    -moz-background-size:100% 50px;
    background-size:100% 50px;
    line-height:25px;
    color:#f1f1f1;
    position:relative;
    padding:0 7px;
    margin:20px 10px;
    overflow:hidden;
    word-wrap:normal;
    white-space:pre;
    position:relative
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    user-select: all;
}
pre:before{
    content:'Click the code to automatically copy';
    display:block;
    background:#F7F7F7;
    margin-left:-7px;
    margin-right:-7px;
    color:#2c3e50;
    padding-left:7px;
    font-weight:500;
    font-size:15px
}
pre code,pre .line-number{
    display:block
}
pre .line-number a{
    color:#27ae60;
    opacity:0.6
}
pre .line-number span{
    display:block;
    float:left;
    clear:both;
    width:20px;
    text-align:center;
    margin-left:-7px;
    margin-right:7px
}
pre .line-number span:nth-child(odd){
    background-color:rgba(0, 0, 0, 0.11)
}
pre .line-number span:nth-child(even){
    background-color:rgba(255, 255, 255, 0.05)
}
pre .cl{
    display:block;
    clear:both
}

If the CSS code doesn't work when inserted inside "]]></b:skin>", it may be worth trying to insert the code immediately after <style> instead.

*In this Blogger blog, the CSS code is inserted after the <style> tag.

$ads={2}

JavaScript code for Source Code

Then, paste the following code before </body>.

<script>
  document.querySelectorAll(&#39;pre&#39;).forEach(pre =&gt; {
    pre.addEventListener(&#39;click&#39;, () =&gt; {
      const range = document.createRange();
      range.selectNode(pre);
      window.getSelection().addRange(range);
      document.execCommand(&#39;copy&#39;);
      window.getSelection().removeAllRanges();
    });
  });
</script>

Congratulations!

Your settings are now complete.

To create a stylish source code design with automatic copy function, enclose the code you want to insert with <pre> and </pre> tags.

---

The JavaScript/CSS code used in this example was generated by ChatGPT, a powerful language model developed by OpenAI that has the ability to create a variety of content.

It used to be difficult to find a design like this, but with the power of AI, it's now easier than ever to create eye-catching code blocks for your blog.

We hope you find this design useful for managing your blog and making it more visually appealing.

How to Start and Use a Successful Blogger Blog

Learn how to start and use a successful Blogger blog by following these essential steps, including designing your blog with SEO and analyzing data.

If you're looking to start a successful Blogger blog, you won't want to miss our complete guide!

From designing your blog with SEO in mind to using data analysis to create engaging content, we've got everything you need to succeed.

Check out our article now!