Previously, I added a code box with a copy button to this site. It used a simple <pre> tag code box with a copy <button>.

However, there were issues with the copy button text being copied along with the code content.

To fix this, I replaced the text with an icon, which resolved the issue. But constantly adding a copy button to each <pre> code box felt inconvenient. For every code box, I had to add the copy button.

I even created a generator to convert entities and simplify the process of posting code on the site by generating the pre code box along with a copy button.

Recently, I made further improvements with a refactored approach.

Now, I don’t need to manually add a copy button to every <pre> code box.

With a simple line of JavaScript, a copy button is automatically appended to each <pre> tag.

Additionally, I can set the title attribute to display as the title on the code box, like this: <pre title=’title here’>

<pre title="Example code">
  <code>
    // Your code here
  </code>
</pre>

// Any code can be here

  

    // HTML  code here

  

    // CSS  code here

  

    // JavaScript  code here

  

It’s pretty neat! and that’s not all; as you can see, different CSS title attributes (like HTML, CSS, JavaScript) now have their own distinct code box header background colors.

You might wonder if I’ll miss the old version of the code box.

Well, it did have its advantages. Not every <pre> code box had to include a copy button.

With the new version, a copy button is appended to every <pre> code box by default.

Also, you can double click or double tap to copy the code in the box.

However, I can still choose not to add it with a single class, which gives me flexibility.  I’ll share that later on