Home
blogging tips
html-project

Code Blocks with Syntax Highlighting in 3 Different Styles

Add stylish, responsive code blocks with copy buttons to your blog. 3 easy designs with syntax highlighting to boost engagement & SEO. Try now!
Aaqib Amin
Code Blocks with Syntax Highlighting in 3 Different Styles

Adding responsive code blocks with syntax highlighting and copy buttons to your blog can make your content stand out. Whether you’re a blogger sharing coding tutorials, a developer showcasing snippets, or a content creator teaching beginners, these code blocks offer a professional and user-friendly way to present code. When readers see a sleek, editor-like interface with a copy-to-clipboard feature, they’re more likely to engage, copy, and share your content, boosting your blog’s engagement and SEO ranking.

These code blocks are powered by simple HTML, CSS, and JavaScript, making them easy to set up. They’re mobile-friendly, lightweight, and compatible with platforms like Blogger or any website. The three styles provided—each with unique aesthetics—mimic popular code editors like VS Code, offering syntax highlighting, copy buttons, and responsive designs. Plus, features like line numbers (in one style) make them perfect for tutorials.

By integrating these code blocks, you show readers you value their experience. The copy button saves time, the professional look builds trust, and the responsive design ensures a positive experience on all devices. Most importantly, readers stay longer on your page, interacting with your content, which improves SEO performance.

Table of Contents

Overview of the Three Code Block Styles

Before we jump into the setup, let’s explore the three distinct styles for responsive code blocks. Each uses a combination of HTML, CSS, and JavaScript, powered by popular syntax highlighting libraries like Highlight.js or Prism.js. Here’s what makes them different:

  • Style 1 (Minimal Dark Theme): Uses Highlight.js with an Atom One Dark theme. Features a black header with traffic-light dots, a subtle copy button, and no line numbers for a clean, minimalist look. Ideal for blogs with dark themes or short code snippets.
  • Style 2 (High-Contrast Night Theme): Built with Prism.js and the Tomorrow Night theme. Offers a bold, high-contrast design with a “Copied!” message that fades in after clicking the copy button. Great for tutorials needing strong readability.
  • Style 3 (Light Theme with Line Numbers): Also uses Prism.js but with a light theme and line numbers on the left. Perfect for educational content where referencing specific lines is helpful, mimicking a professional IDE.

These styles are inspired by open-source communities and tools like GitHub and VS Code, making your blog feel like a pro coding platform. They’re fully responsive, ensuring smooth performance on desktops, tablets, and mobiles, and they’re optimized to keep your site fast for better SEO.

Install These Responsive Code Blocks

Adding a responsive code block to your Blogger or website is simple with the provided HTML, CSS, and JavaScript code. Follow these steps carefully to avoid errors. If you’re new to coding, don’t worry—each step is beginner-friendly, but read attentively to ensure success.

Important! Before adding any code to your XML theme, we strongly recommend creating a backup of your current theme. This ensures that if anything goes wrong, you can easily restore it later.
Use only one of these three styles; using more than one may cause errors.

Minimal Dark Theme (Highlight.js)

Sleek dark code block with syntax highlighting & a subtle copy button. Powered by Highlight.js, its minimalist, editor-like design is perfect for blogs with a modern, clean aesthetic.

Code Blocks Minimal Dark Theme (Highlight.js)

Install Minimal Dark Theme (Highlight.js) – Complete Steps

  1. Copy CSS Code:
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css');.codeWrapper{border-radius:10px;background:#1e1e1e;overflow:hidden;margin:20px 0;position:relative;display:flex;flex-direction:column}
.codeHeader{display:flex;align-items:center;justify-content:space-between;height:35px;padding:0 12px;background:#000;position:sticky;top:0;z-index:10}
.dots span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.dot1{background:orange}
.dot2{background:yellow}
.dot3{background:green}
.codeIcon{width:18px;height:18px;background-size:contain;background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5 15c-.13 0-.26-.05-.35-.15l-4-4a.5.5 0 010-.7l4-4a.5.5 0 01.7 0 .5.5 0 010 .7L1.35 10l3.65 3.65a.5.5 0 01-.35.85zM15 15a.5.5 0 01-.35-.15.5.5 0 010-.7L18.3 10l-3.65-3.65a.5.5 0 01.7-.7l4 4a.5.5 0 010 .7l-4 4a.5.5 0 01-.35.15zM7.5 15a.5.5 0 01-.26-.07.5.5 0 01-.16-.68l5-8a.5.5 0 11.85.52l-5 8a.5.5 0 01-.43.23z'/></svg>")}
.codeContent{flex:1;overflow:auto}
.codeContent pre{margin:0;padding:10px 12px;background:#1e1e1e;white-space:pre;line-height:1.5}
.copyBtn{position:absolute;top:38px;right:10px;background:transparent;border:none;cursor:pointer;opacity:.8;transition:opacity .2s,transform .2s;z-index:2}
.copyBtn:hover{opacity:1;transform:scale(1.1)}
.copyBtn svg{width:18px;height:18px;stroke:#ccc}
.copyBtn.copied{background:none;color:#4caf50;font-size:12px;font-weight:bold;text-indent:0;width:auto;min-width:60px}
</style>
  1. Go to Blogger Dashboard → Theme → Edit HTML.
  2. Click Ctrl+F, find </head>, and paste the CSS code above it.
  3. Copy JavaScript Code:
<script>
document.addEventListener("DOMContentLoaded",()=>{ let script=document.createElement("script"); script.src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"; document.head.appendChild(script); script.onload=()=>{ document.querySelectorAll("pre code").forEach(codeEl=>{ const wrapper=document.createElement("div"); wrapper.className="codeWrapper"; const header=document.createElement("div"); header.className="codeHeader"; const dots=document.createElement("div"); dots.className="dots"; ["dot1","dot2","dot3"].forEach(c=>{ let s=document.createElement("span"); s.className=c; dots.appendChild(s); }); header.appendChild(dots); const icon=document.createElement("div"); icon.className="codeIcon"; header.appendChild(icon); const content=document.createElement("div"); content.className="codeContent"; codeEl.parentNode.insertBefore(wrapper,codeEl); content.appendChild(codeEl); wrapper.appendChild(header); wrapper.appendChild(content); const copyBtn=document.createElement("button"); copyBtn.className="copyBtn"; copyBtn.innerHTML=`<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>`; wrapper.appendChild(copyBtn); copyBtn.addEventListener("click",()=>{ navigator.clipboard.writeText(codeEl.innerText).then(()=>{ copyBtn.textContent="Copied!"; copyBtn.classList.add("copied"); setTimeout(()=>{ copyBtn.classList.remove("copied"); copyBtn.innerHTML=`<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>`; },1000); }); }); if(window.hljs)hljs.highlightElement(codeEl); }); }; });
</script>
  1. Click Ctrl+F, find </body>, and paste the JS code above it.
  2. Save theme settings.
  3. Copy HTML Code:
<pre><code class="language-js">Add your code here</code></pre>
  1. Open your Blogger post in HTML view.
  2. Paste the HTML code where you want the code block to appear.
  3. Replace Enter your code with your actual code.
  4. Change language-js to match your code’s language (e.g., language-html, language-css).
  5. Save and preview your post.

High-Contrast Night Theme (Prism.js)

Vibrant night-themed code block with syntax highlighting & a copy button. Built with Prism.js, it offers bold contrast and a “Copied!” feedback message, ideal for engaging coding tutorials.

Code Blocks High-Contrast Night Theme (Prism.js)

Install High-Contrast Night Theme (Prism.js) – Complete Steps

  1. Copy CSS Code:
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css');:not(pre)>code[class*=language-]{white-space:pre}
.codeWrapper{border-radius:10px;background:#1e1e1e;overflow:hidden;margin:20px 0;position:relative;display:flex;flex-direction:column}
.codeHeader{display:flex;align-items:center;justify-content:space-between;height:35px;padding:0 12px;background:#000;position:sticky;top:0;z-index:10}
.dots span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.dot1{background:orange}
.dot2{background:yellow}
.dot3{background:green}
.codeIcon{width:18px;height:18px;background-size:contain;background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5 15c-.13 0-.26-.05-.35-.15l-4-4a.5.5 0 010-.7l4-4a.5.5 0 01.7 0 .5.5 0 010 .7L1.35 10l3.65 3.65a.5.5 0 01-.35.85zM15 15a.5.5 0 01-.35-.15.5.5 0 010-.7L18.3 10l-3.65-3.65a.5.5 0 01.7-.7l4 4a.5.5 0 010 .7l-4 4a.5.5 0 01-.35.15zM7.5 15a.5.5 0 01-.26-.07.5.5 0 01-.16-.68l5-8a.5.5 0 11.85.52l-5 8a.5.5 0 01-.43.23z'/></svg>")}
.codeContent{padding:10px;flex:1;overflow:auto}
.codeContent pre{margin:0;padding:10px 12px;background:#1e1e1e;white-space:pre;line-height:1.5}
.copyBtn{position:absolute;top:38px;right:10px;background:transparent;border:none;cursor:pointer;opacity:.8;z-index:2}
.copyBtn:hover{opacity:1}
.copyBtn svg{width:18px;height:18px;stroke:#ccc}
.copyMsg{position:absolute;top:38px;right:40px;background:#4caf50;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;display:none}
</style>
  1. Go to Blogger Dashboard → Theme → Edit HTML.
  2. Find </head> and paste the CSS code above it.
  3. Copy JavaScript Code:
<script>
document.addEventListener("DOMContentLoaded",()=>{ let prismScript=document.createElement("script"); prismScript.src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"; document.head.appendChild(prismScript); prismScript.onload=()=>{ document.querySelectorAll("pre code").forEach(codeEl=>{ const wrapper=document.createElement("div");wrapper.className="codeWrapper"; const header=document.createElement("div");header.className="codeHeader"; const dots=document.createElement("div");dots.className="dots"; ["dot1","dot2","dot3"].forEach(c=>{let s=document.createElement("span");s.className=c;dots.appendChild(s);}); header.appendChild(dots); const icon=document.createElement("div");icon.className="codeIcon";header.appendChild(icon); const content=document.createElement("div");content.className="codeContent"; codeEl.parentNode.insertBefore(wrapper,codeEl); content.appendChild(codeEl); wrapper.appendChild(header); wrapper.appendChild(content); const copyBtn=document.createElement("button"); copyBtn.className="copyBtn"; copyBtn.innerHTML=`<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>`; wrapper.appendChild(copyBtn); const msg=document.createElement("div");msg.className="copyMsg";msg.innerText="Copied!"; wrapper.appendChild(msg); copyBtn.addEventListener("click",()=>{ navigator.clipboard.writeText(codeEl.innerText).then(()=>{ msg.style.display="block"; setTimeout(()=>msg.style.display="none",1500); }); }); if(window.Prism)Prism.highlightElement(codeEl); }); }; });
</script>
  1. Find </body> and paste the JS code above it.
  2. Save theme settings.
  3. Copy HTML Code:
<pre><code class="language-js">Add your code here</code></pre>
  1. Paste in post (HTML view), replace Enter your code, and adjust language class.
  2. Save and preview.

Light Theme with Line Numbers (Prism.js)

Light-themed code block with syntax highlighting, copy button & line numbers. Prism.js-powered, its IDE-style look is great for tutorials needing clear code referencing on any blog.

Code Blocks Light Theme with Line Numbers (Prism.js)

Install Light Theme with Line Numbers (Prism.js – Complete Steps

  1. Copy CSS Code:
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css');pre{--background:#f9f9f9;--border:1px solid #e0e0e0;--border-radius:4px;--padding:10px;--font-size:13px;--line-height:1.5;--color:#333;position:relative;background-color:var(--background);border:var(--border);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);margin:20px 0;overflow:hidden;width:fit-content;width:95%}
pre code{padding:0;display:block;overflow-x:auto;background:transparent;font-family:inherit}
.syntax-lines{counter-reset:syntax-line;position:absolute;left:0;top:var(--padding);bottom:var(--padding);width:10px;padding-right:10px;text-align:right;color:#666;background-color:var(--background);border-right:var(--border)}
.syntax-lines span{display:block;line-height:var(--line-height)}
.syntax-lines span::before{counter-increment:syntax-line;content:counter(syntax-line);}
.syntax-copy{position:absolute;top:var(--padding);right:var(--padding);width:20px;height:24px;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"%3E%3Crect x="9" y="9" width="13" height="13" rx="2" ry="2"/%3E%3Cpath d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/%3E%3C/svg%3E') no-repeat center;background-color:transparent;border:none;cursor:pointer;opacity:0.6;transition:opacity 0.2s;font-size:10px;text-align:center;line-height:24px;color:#666;padding:0;overflow:hidden;white-space:nowrap}
.syntax-copy:hover{opacity:1}
pre code{padding-left:20px}
.token.tag{color:#0074cc}
.token.attr-name{color:#008000}
.token.attr-value{color:#d35400}
pre[class*=language-]{padding:0.6em}
.syntax-copy.copied{background:none;color:#28a745;font-weight:bold;text-indent:0;width:auto;min-width:60px}
</style>
  1. Go to Blogger Dashboard → Theme → Edit HTML.
  2. Find </head> and paste the CSS code above it.
  3. Copy JavaScript Code:
<script>
import('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js').then(()=>{ function copyCode(preElement){ const code=preElement.querySelector('code').innerText; navigator.clipboard.writeText(code).then(()=>{ const copyButton=preElement.querySelector('.syntax-copy'); copyButton.textContent='Copied!'; copyButton.classList.add('copied'); setTimeout(()=>{ copyButton.textContent=''; copyButton.classList.remove('copied'); copyButton.style.backgroundImage='url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"%3E%3Crect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/%%3E%3Cpath d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/%%3E%3C/svg%3E")'; copyButton.style.width='60px'; },1000); }).catch(err=>console.error('Copy failed:',err)); } document.querySelectorAll('pre > code').forEach(codeElement=>{ const pre=codeElement.parentElement; codeElement.classList.add('language-html'); const lines=codeElement.innerText.split(/\r|\r\n|\n/); const syntaxLines=document.createElement('div'); syntaxLines.className='syntax-lines'; syntaxLines.innerHTML=lines.map(()=>'<span></span>').join(''); const copyButton=document.createElement('button'); copyButton.className='syntax-copy'; copyButton.addEventListener('click',()=>copyCode(pre)); pre.insertBefore(syntaxLines,codeElement); pre.appendChild(copyButton); }); Prism.highlightAll(); });
</script>
  1. Find </body> and paste the JS code above it.
  2. Save theme settings.
  3. Copy HTML Code:
<pre><code>Add your code here</code></pre>
  1. Paste in post, replace Enter your code, and adjust language class if needed.
  2. Save and preview.

You only need to add the CSS and JS once in your theme. For each code block, use the HTML code in your post’s HTML view, replacing the placeholder with your code and setting the correct language class (e.g., language-python). If using multiple styles, add unique class names (e.g., codeWrapper-style1) to avoid conflicts.

Features & Who Can Use

  • Syntax Highlighting: Colors code elements (e.g., tags, attributes) for better readability across languages like JavaScript, HTML, CSS, and more.
  • Copy Button: One-click copying with a “Copied!” feedback message, reducing errors for users.
  • Fully Responsive: Scales perfectly on mobile and desktop, with scrollable overflow for long code.
  • Line Numbers (Style 3): Helps readers reference specific lines, ideal for tutorials.
  • Editor-Like Design: Headers with traffic-light dots mimic code editors, adding a professional vibe.
  • Lightweight: Uses CDN-hosted libraries (Highlight.js or Prism.js) to keep your site fast.

Who Can Use: Tech bloggers, coding tutorial creators, online educators, developers sharing snippets, or anyone presenting code on Blogger, WordPress, or static websites.

The Meta Behind These Code Blocks: These designs are inspired by open-source libraries and popular tools like VS Code, GitHub, and Sublime Text. They’re built to make your blog feel like a coding hub, encouraging shares and backlinks, which boost SEO. The Highlight.js and Prism.js libraries are maintained by global developer communities, ensuring reliability and regular updates.

Responsive Code Block FAQ

What are responsive code blocks with copy buttons?

They’re styled HTML elements that display code with syntax highlighting, a copy button, and responsive design. They make code snippets easy to read and copy, improving user experience and engagement.

How do the three styles differ?

Style 1 is a minimal dark theme (Highlight.js), Style 2 is high-contrast dark with a feedback message (Prism.js), and Style 3 is light with line numbers (Prism.js). Pick based on your blog’s aesthetic and purpose.

Can I use these on Blogger or other platforms?

Yes, they’re compatible with Blogger (via theme HTML), WordPress (with custom code plugins), or any HTML-based site. Just follow the setup steps.

Can I customize the appearance?

Yes, tweak the CSS to change colors (e.g., background:#1e1e1e to #ffffff), fonts, or button styles. Modify JS for additional features like a download option.

Will these slow down my site?

No, they use lightweight CDN-hosted libraries, ensuring minimal impact on page speed while boosting engagement for better SEO.

What if the copy button doesn’t work?

Ensure your site uses HTTPS, as clipboard APIs require it. Check for JS errors in the browser console (right-click → Inspect → Console) and verify code placement.

Can I use multiple code blocks in one post?

Yes, add multiple <pre><code> blocks with different code snippets. For multiple styles, use unique class names to prevent conflicts.

Related Posts

Final Thought

Responsive code blocks with copy buttons are a simple, modern, and fully responsive way to elevate your blog’s coding content. They make your tutorials interactive, professional, and easy to follow, whether you’re teaching JavaScript, HTML, or Python. By using HTML, CSS, and JS, you can quickly add these features to your posts, enhancing user experience and SEO performance.

These designs draw from the open-source world, leveraging trusted libraries like Highlight.js and Prism.js, which are widely used by developers globally. They’re perfect for beginners and pros alike, offering a balance of simplicity and functionality. Test one style first, tweak it to match your blog, and watch your audience engagement soar!

Post a Comment