New Advanced Code Blocks for Blogger

Are you tired of sharing code snippets on your Blogger blog, only to have them look flat and unprofessional? The default <pre> tag lacks the features modern developers expect, making your tutorials hard to follow and frustrating for readers who want to copy your code. To truly improve blog post readability and engagement, you need to move beyond simple text and provide a user-friendly way to display HTML, CSS, and JavaScript.

That's why we're excited to introduce a brand-new set of 2 advanced code blocks, designed specifically to solve this problem. These aren't just simple boxes; they are powerful tools built with pure CSS and JavaScript. We're giving you everything you need, including automatic syntax highlighting, a one-click Blogger code block with copy button, and a feature to add line numbers to pre tag for clear, step-by-step instructions.

This guide will show you how to add code blocks to Blogger with two unique styles: a feature-rich Standard block for single snippets and an impressive Multi-Tab block using CSS JavaScript code block tabs. Whether you're sharing a simple fix or a complex multi-language project, these tools will function as a professional code syntax highlighter, making your blog look more authoritative and helping your readers learn faster.

Table of Contents

Overview of Our New Code Block Designs

This new collection includes two major upgrades:

1. Standard Code Block: This automatically styles any <pre> tag with a header (showing the language name), a copy button, and line numbers.
2. Multi-Tab Block: This design is perfect for when you need to show HTML, CSS, and JavaScript code all in one place. Users can easily switch between codes by clicking the tabs.

---

How to Install These Code Blocks on Blogger

Adding these stylish code blocks to your Blogger blog is simple. Just follow these steps carefully.

Warning!
Before editing your theme's XML, we strongly recommend you create a backup of your current theme. This ensures you can easily restore it if anything goes wrong.

Add the Required Libraries (One-Time Setup)

These codes are necessary for syntax highlighting. You only need to add this to your theme once.

1. Go to your Blogger Dashboard.
2. Navigate to the Theme section.
3. Click the drop-down arrow next to the "Customize" button and select Edit HTML.
4. Inside the theme editor, find the </head> tag.
5. Copy the two <link> and <script> tags below and paste them right above the </head> tag.

<!--[ Highlight.js JS ]-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'></script>

1. Now, find the </body> tag (it will be at the very bottom of the file).

Install the CSS (One-Time Setup)

This CSS code styles both types of code blocks (Standard and Tabbed).

1. In the theme editor, paste the <style> code below right under the <!--[ Highlight.js CSS ]--> code (or anywhere above </head>).

<style>
/*<![CDATA[*//*--[ Advanced Code Blocks CSS ]--*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css');body{background:#1e1e1e;color:#d4d4d4;font-family:'Noto Sans Mono',Consolas,'Courier New',monospace}
.codeWrap{background:#1e1e1e;border-radius:8px;overflow:hidden;border:1px solid #4a4a4a}
.codeHeader{display:flex;justify-content:space-between;align-items:center;background:#333;padding:0.5em 0.5em 0.5em 1em;border-bottom:1px solid #4a4a4a}
.langTitle{color:#858585;font-size:0.85em;text-transform:uppercase}
.copyBtn{background:#4a4a4a;color:#dddddd;border:none;padding:0.4em 0.8em;border-radius:5px;cursor:pointer;font-size:0.8em}
.copyBtn:hover{background:#5a5a5a}
.copyBtn.copied{background:#009688;color:#fff}
.codeBody{display:flex;position:relative}
.lineCount{flex-shrink:0;padding:1em 0.75em 1em 1em;font-size:0.9em;color:#858585;text-align:right;user-select:none;border-right:1px solid #333}
.lineCount span{display:block;line-height:1.5}
.codeBody pre{margin:0;background:#252526;color:#d4d4d4;font-size:0.9em;line-height:1.5;overflow-x:auto;flex-grow:1}
pre.nonum,pre.nocopy{background:#252526;color:#d4d4d4;padding:1em;border-radius:8px;margin:1.5em 0;overflow-x:auto;border:1px solid #4a4a4a}
.codeTabs.syntax{border-radius:8px;overflow:hidden;margin:1.5em 0;border:1px solid #4a4a4a;background:#1e1e1e}
.codeTabs.syntax ul{display:flex;list-style:none;margin:0;padding:0 0.5em;background:#000;border-bottom:1px solid #4a4a4a}
.codeTabs.syntax li{padding:0.7em 1.2em;cursor:pointer;color:#858585;border-bottom:3px solid transparent;transition:color 0.2s,border-color 0.2s;font-size:0.9em}
.codeTabs.syntax li:hover{color:#d4d4d4}
.codeTabs.syntax li.active{color:#009688;border-bottom-color:#009688;font-weight:bold}
.tab-content{display:none}
.tab-content.show{display:block}
/*]]>*/
</style>

Install the JavaScript (One-Time Setup)

This JavaScript code is required for the copy button, line numbers, and tab functionality to work.

1. In the theme editor, find the </body> tag.
2. Copy the entire <script> code below and paste it right above the </body> tag.

<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded',()=>{ hljs.highlightAll(); document.querySelectorAll('.codeTabs.syntax').forEach(tabGroup=>{ const tabs=tabGroup.querySelectorAll('ul li'); const contents=tabGroup.querySelectorAll('.tab-content'); tabs.forEach((tab,idx)=>{ tab.addEventListener('click',()=>{ tabs.forEach(t=>t.classList.remove('active')); contents.forEach(c=>c.classList.remove('show')); tab.classList.add('active'); contents[idx].classList.add('show'); }); }); }); document.querySelectorAll('pre[class]').forEach(pre=>{ const codeEl=pre.querySelector('code'); if(!codeEl)return; const code=codeEl.innerText.trim(); const wrapper=document.createElement('div'); wrapper.className='codeWrap'; const header=document.createElement('div'); header.className='codeHeader'; const lang=document.createElement('span'); lang.className='langTitle'; lang.textContent=pre.className || 'code'; const copy=document.createElement('button'); copy.className='copyBtn'; copy.textContent='Copy'; copy.addEventListener('click',()=>{ navigator.clipboard.writeText(code); copy.textContent='Copied!'; copy.classList.add('copied'); setTimeout(()=>{copy.textContent='Copy';copy.classList.remove('copied');},2000); }); header.appendChild(lang); header.appendChild(copy); const body=document.createElement('div'); body.className='codeBody'; const lineBox=document.createElement('div'); lineBox.className='lineCount'; const total=code.split('\n').length; for(let i=1;i<=total;i++){ const span=document.createElement('span'); span.textContent=i; lineBox.appendChild(span); } body.appendChild(lineBox); const cloned=pre.cloneNode(true); body.appendChild(cloned); wrapper.appendChild(header); wrapper.appendChild(body); pre.parentNode.replaceChild(wrapper,pre); }); });
//]]>
</script>

1. Click the Save icon in the top-right corner.

That's it! All the necessary code is now installed on your blog.

---

How to Use the Code Blocks in Your Posts

Now that the CSS and JS are installed, you can easily add these code blocks to your posts.

1. Create a new post or edit an existing one.
2. In the post editor, switch from "Compose view" to "HTML view" by clicking the </> icon.
3. Find the HTML code below for the design you want and paste it into your post.
4. Replace the demo text with your own code.

Here are the HTML codes for both designs:

1. Standard Code Block (with Line Numbers & Copy Button)

Use this for displaying any single code snippet. The language name will be automatically pulled from the class (e.g., css, js, html).

<!--[ Standard Code Block ]-->
<pre class="html"><code">... Your HTML code here ...</code></pre>

2. Multi-Tab Code Block

Use this when you need to show HTML, CSS, and JS code together.

<!--[ Multi-Tab Code Block ]-->
<div class="codeTabs syntax">
  <ul>
    <li class="active">HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ul>  
  <div class="tab-content show">
    <pre class="html"><code>... Your HTML code here ...</code></pre>
  </div>  
  <div class="tab-content">
    <pre class="css"><code>... Your CSS code here ...</code></pre>
  </div>  
  <div class="tab-content">
    <pre class="js"><code>... Your JS code here ...</code></pre>
  </div> 
</div>

---

Key Features & Benefits

• 2-in-1 Design: You get both Standard (line numbers + copy) and Tabbed blocks.
• Automatic Functionality: Just adding the <pre class="css"> tag automatically builds the header, line numbers, and copy button.
• Syntax Highlighting: Uses the Highlight.js library to make your code easy to read.
• Copy-to-Clipboard: Users can copy your code with a single click, improving user experience.
• Fully Responsive: These code blocks look fantastic on both mobile and desktop.
• Beginner-Friendly: Just one-time CSS/JS setup and then use simple HTML snippets in your posts.

---

Frequently Asked Questions (FAQ)

Do these code blocks work without JavaScript?

No. The JavaScript is essential for the copy button, line numbers, and tab functionality. The CSS handles the styling, but the JS adds the functionality.

How do I change the language name (e.g., "CSS") in the header?

It's automatic. When you write <pre class="css"> in your post, the script automatically picks up "css" as the header title. If you write <pre class="html">, the title will be "html".

Can I change the color theme?

Yes. In Step 1, we used atom-one-dark.min.css. You can find another theme (like github-dark.min.css or default.min.css) from the Highlight.js website and replace the CDN link.

Can I use multiple tabbed blocks in a single post?

Yes! You can use as many standard and tabbed blocks as you need within a single post. They will not conflict with each other.

---

Related Posts

Final Thoughts

Upgrading your blog's appearance doesn't have to be complicated. These modern CSS and JS code blocks are an excellent solution to make your code-based tutorials more organized, scannable, and professional.

By giving readers features like one-click copy and a tabbed interface, you improve the user experience (UX), which can lead to longer visitor duration and better SEO performance.