Add Highlighted Code Blocks with Copy Button in Blogger (Highlight.js + Custom Style)

on

Blogger’s default post editor doesn’t provide a proper code box for displaying programming code.

If you often share snippets or tutorials, you might want syntax highlighting and a convenient “Copy” button.

In this tutorial, you’ll learn how to add a beautiful, dark-themed code block with syntax highlighting (using Highlight.js) and a copy-to-clipboard button, by simply editing your Blogger theme.

Step 1: Open Your Blogger Theme Editor

  1. Go to your Blogger Dashboard

  2. Click Theme → Edit HTML

  3. Scroll down to the end of the <head> section (before </head>)

Step 2: Paste the Following Code

Copy and paste the full block below exactly as it is.
It includes Highlight.js setup, custom styles for your code boxes, and the automatic “Copy” button script.


<!-- Highlight.js stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />

<!-- Highlight.js core script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- Initialize code highlighting -->
<script>
  hljs.highlightAll();
</script>

<!-- Custom code block style + copy button -->
<style>
pre {
  position: relative;
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
}
button.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #007bff;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8em;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.2s;
}
button.copy-btn:hover {
  opacity: 1;
  background: #0056b3;
}
button.copy-btn.copied {
  background: #28a745;
}
</style>

<!-- Script to automatically add copy buttons to code blocks -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("pre code").forEach(function (codeBlock) {
    const button = document.createElement("button");
    button.className = "copy-btn";
    button.textContent = "Copier";
    codeBlock.parentNode.insertBefore(button, codeBlock);
    button.addEventListener("click", async function () {
      const text = codeBlock.innerText;
      try {
        await navigator.clipboard.writeText(text);
        button.textContent = "Copié !";
        button.classList.add("copied");
        setTimeout(function () {
          button.textContent = "Copier";
          button.classList.remove("copied");
        }, 1500);
      } catch (err) {
        console.error("Erreur de copie :", err);
      }
    });
  });
});
</script>

Step 3: Add Code Blocks in Your Posts

Now, whenever you want to display code in a post, wrap it inside <pre><code> tags like this:

<pre><code class="language-html">
&lt;h1&gt;Hello Blogger!&lt;/h1&gt;
</code></pre>

Blogger will automatically highlight the syntax and show a “Copier” button in the corner.

That’s it!
You’ve just upgraded your Blogger to look and feel like a professional developer blog

You may encounter the error “The widget settings in widget with id <b>AdSense1</b> is not valid. An internal error occurred.” while editing. Please refer to the official support thread for a solution:
https://support.google.com/blogger/thread/265510861/the-widget-settings-in-widget-with-id-b-adsense1-b-is-not-valid-an-internal-error-occurred?hl=en

Comments

Post a Comment