Add Beautiful Code Blocks with Copy Button to Blogger Posts (No Plugins)

Display HTML, CSS, JavaScript, and Python Code in Blogger with Copy Button

If you're a developer or blogger who shares coding tutorials, you've likely faced the challenge of properly displaying code snippets in your posts. Formatting issues, styling limitations, and lack of a copy button can negatively impact the user experience. This post shows you how to beautifully embed code blocks with syntax-like styling, dark mode, line numbers, and a copy-to-clipboard button—without using any external CSS or JavaScript libraries.

Why Stylish Code Blocks Matter

Readable, interactive code blocks increase the professionalism of your blog. They're especially useful for coding tutorials, tech documentation, or any content aimed at teaching. Google favors content that enhances user experience, so these elements also improve SEO. If readers can easily copy and test your code, they’ll stay longer, interact more, and are more likely to return.

Requirements & Compatibility

These blocks use only inline CSS and minimal JavaScript. That means:

• ✅ Compatible with Blogger
• ✅ No external file dependencies
• ✅ Works on mobile and desktop
• ✅ Fast page loading

🔧 How It Works

Each code block is wrapped in a <div> with inline styles for dark mode, padding, rounded borders, and overflow scrolling. A <button> uses navigator.clipboard.writeText() to copy the code inside. We use <code> and <pre> tags for proper formatting and escaping of special characters like < and >.

General Syntax

    	
         <div style="position: relative; background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 1em; font-family: monospace; overflow-x: auto; border: 1px solid #444; margin-bottom: 2em;">
        <button onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').innerText)" style="position: absolute; top: 10px; right: 10px; background: #007acc; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">Copy</button>
        <pre style="margin: 0;"><code>
        	Write Code Here
         </code></pre>
      </div>
    

Explain 

The Outer <div>

This outer <div> acts as a container for the code block. It has inline styles applied directly to it:

position: relative; → This allows the button to be positioned absolutely inside it.

background: #1e1e1e; and color: #d4d4d4; → Sets the dark theme look with light text.

border-radius, padding, font-family, overflow-x, etc. → These give it nice rounded corners, monospaced font, padding, and scrolling if the code is too wide.

📋 Clipboard Copy Logic

• navigator.clipboard.writeText(...) → Copies the provided text to the clipboard.

• this.parentElement.querySelector('code') → Finds the <code> block inside the parent <div>.

• .innerText → Grabs the visible text from the <code> block.

So when a user clicks the button, it copies the content inside <code> to their clipboard.

📜 Code Block

<pre> means “preformatted text” — it preserves spacing and line breaks.

<code> is where the actual code content goes.

🚀 HTML Code Block

Here's an example of a properly formatted HTML code snippet:

    
        <div style="position: relative; background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 1em; font-family: monospace; overflow-x: auto; border: 1px solid #444; margin-bottom: 2em;">
        <button onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').innerText)" style="position: absolute; top: 10px; right: 10px; background: #007acc; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">Copy</button>
        <pre style="margin: 0;"><code>
        <span style="color: #6A9955;">1</span> &lt;!DOCTYPE html&gt;
        <span style="color: #6A9955;">2</span> &lt;html lang="en"&gt;
        <span style="color: #6A9955;">3</span> &lt;head&gt;
        <span style="color: #6A9955;">4</span> &nbsp;&nbsp;&lt;meta charset="UTF-8"&gt;
        <span style="color: #6A9955;">5</span> &nbsp;&nbsp;&lt;title&gt;Hello&lt;/title&gt;
        <span style="color: #6A9955;">6</span> &lt;/head&gt;
        <span style="color: #6A9955;">7</span> &lt;body&gt;
        <span style="color: #6A9955;">8</span> &nbsp;&nbsp;&lt;h1&gt;Hi there&lt;/h1&gt;
        <span style="color: #6A9955;">9</span> &lt;/body&gt;
        <span style="color: #6A9955;">10</span> &lt;/html&gt;
        </code></pre>
      </div>
  

HTML Code Block output

Here's an example of a properly formatted HTML code snippet output:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4   <meta charset="UTF-8">
5   <title>Hello</title>
6 </head>
7 <body>
8   <h1>Hi there</h1>
9 </body>
10 </html>

🎨 CSS Code Block

This CSS snippet sets a dark background and text color for the entire page:

    
        <div style="position: relative; background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 1em; font-family: monospace; overflow-x: auto; border: 1px solid #444; margin-bottom: 2em;">
        <button onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').innerText)" style="position: absolute; top: 10px; right: 10px; background: #007acc; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">Copy</button>
        <pre style="margin: 0;"><code>
        <span style="color: #6A9955;">1</span> body {
        <span style="color: #6A9955;">2</span> &nbsp;&nbsp;background-color: #121212;
        <span style="color: #6A9955;">3</span> &nbsp;&nbsp;color: white;
        <span style="color: #6A9955;">4</span> &nbsp;&nbsp;font-family: Arial, sans-serif;
        <span style="color: #6A9955;">5</span> }
        </code></pre>
      </div>
  

CSS Code Block Output

This CSS snippet sets a dark background and text color for the entire page output:

1 body {
2   background-color: #121212;
3   color: white;
4   font-family: Arial, sans-serif;
5 }

⚙️ JavaScript Code Block

This JavaScript snippet logs a greeting to the console:

    
        <div style="position: relative; background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 1em; font-family: monospace; overflow-x: auto; border: 1px solid #444; margin-bottom: 2em;">
        <button onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').innerText)" style="position: absolute; top: 10px; right: 10px; background: #007acc; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">Copy</button>
        <pre style="margin: 0;"><code>
        <span style="color: #6A9955;">1</span> function greet(name) {
        <span style="color: #6A9955;">2</span> &nbsp;&nbsp;console.log("Hello, " + name + "!");
        <span style="color: #6A9955;">3</span> }
        <span style="color: #6A9955;">4</span> greet("World");
        </code></pre>
      </div>
  

JavaScript Code Block Output

This JavaScript snippet logs a greeting to the console output:

1 function greet(name) {
2   console.log("Hello, " + name + "!");
3 }
4 greet("World");

📈 SEO Benefits of Well-Formatted Code

Using semantic HTML like <h2>, <p>, and <code> makes your post easier for search engines to understand. Including code examples improves topical authority for programming-related keywords like "HTML tutorial", "JavaScript example".

💡 Bonus Tip: Use Descriptive Text Around Your Code

Avoid just dumping code blocks without explanation. Always include contextual paragraphs, summaries, and usage examples around your code. This helps both users and search engines understand the purpose of each snippet.

🎯 Conclusion

With this method, you can turn any Blogger post into a professional-looking, developer-friendly tutorial hub. These dark-themed code blocks with line numbers and copy functionality make it easy for readers to learn from and reuse your code. Plus, they’re fully compatible with Blogger—no external files, no extra headaches.