Introduction
If you're a developer, designer, or tech blogger using Blogger, you've probably struggled with how to display code snippets cleanly and professionally. Plain <pre> tags just don't cut it — you need syntax highlighting, line numbers, and language labels to make your content readable and engaging.
In this guide, you'll learn how to add syntax highlighting in Blogger without relying on external libraries. Using a bit of CSS and JavaScript, you’ll transform boring code blocks into beautifully styled, language-specific highlights with copy-friendly features. Follow these simple steps to integrate custom syntax highlighting into your Blogger theme.
Add Custom CSS to Your Blogger Theme
This CSS will style your <pre> and <code> tags with:
- Syntax-specific colors (HTML, CSS, JavaScript, jQuery)
- Language labels
- Line numbers>
- Highlight styles and helpful tooltips How to add it:
- Go to Blogger > Theme > Edit HTML
- Find the
]]></b:skin>tag - Paste the following code just before
]]></b:skin>:
/* CSS Code By https://mrsanelectrician.blogspot.com */
pre {margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #36A3C9;border-radius:3px;}
pre[data-codetype]{padding:37px 1em 5px}
pre[data-codetype]:before{content:attr(data-codetype);display:block;position:absolute;top:-5px;right:0;left:0;padding:7px;color:#FFFFFF;-moz-box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:'Code';font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows > span {display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype="CSS"]:before,pre[data-codetype="HTML"]:before,
pre[data-codetype="JavaScript"]:before,pre[data-codetype="JQuery"]:before{background-color:#fff;}
pre::after {content: "Double click to selection | Use Ctrl+C to Copy";padding: 2px 10px;width: auto;height: auto;position: absolute;right: 8px;top: 2px;font-size: 13px;color: #fff;font-weight: 900;line-height: 20px;transition: all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
pre[data-codetype="HTML"]{color:#2e87e7}
pre[data-codetype="CSS"]{color:#00a78e}
pre[data-codetype="JavaScript"]{color:#8a7967}
pre[data-codetype="JQuery"]{color:#fd5c63}
pre[data-codetype="HTML"]:before{background-color:#6d6e70}
pre[data-codetype="CSS"]:before{background-color:#00a78e}
pre[data-codetype="JavaScript"]:before{background-color:#8a7967}
pre[data-codetype="JQuery"]:before{background-color:#fd5c63}
pre[data-codetype="HTML"] span.line-number{border-right: 2px solid #6d6e70;}
pre[data-codetype="CSS"] span.line-number{border-right: 2px solid #00a78e;}
pre[data-codetype="JavaScript"] span.line-number{border-right: 2px solid #8a7967;}
pre[data-codetype="JQuery"] span.line-number{border-right: 2px solid #fd5c63;}
pre code,pre .line-number{display:block;color:#666666}
pre .line-number{color:#666666;min-width:1em}
pre .line-number span{display:block}
pre .line-number span:nth-child(even){background-color:#EEEEEE}
pre .cl{display:block;clear:both}
pre .line-number{float:left;margin:0 1em 0 -1em;border-right:2px solid #666666 ;text-align:right}
pre .line-number span{padding:0 .8em 0 1em}This code sets up everything needed to visually enhance code blocks on your blog.
Embed Your Code Blocks in Posts
Now that the styling and functionality are ready, you can start adding code blocks in your posts using this format:
<pre data-codetype="HTML">Your HTML code here</pre>
<pre data-codetype="CSS">Your CSS code here</pre>
<pre data-codetype="JavaScript">Your JavaScript code here</pre>
<pre data-codetype="JQuery">Your jQuery code here</pre>- Show a colored label like “HTML” or “JavaScript”
- Support line numbers
- Allow double-click-to-select functionality
Add JavaScript to Enable Auto-Selection
The JavaScript snippet below enables two useful features:
- Converts
<i rel="pre">to<pre><code>for easier formatting - Allows users to double-click to select the entire code block How to add it:
- Scroll to the bottom of your theme HTML
- Just before the closing
</body>tag, paste this code:
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
Bonus Tip
Want to keep your post editor clean?
Use this shortcut:<i rel="pre">Your code here</i>The JavaScript will auto-convert it into a styled <pre><code> block on the frontend!
This is great if you're editing in the Compose view and want to avoid switching to HTML mode.
Conclusion
By following this guide, you've now enhanced your Blogger posts with custom code formatting that looks professional, is user-friendly, and doesn’t rely on external libraries like Prism.js or Highlight.js. It’s fast, lightweight, and fully customizable.
Whether you're sharing HTML, CSS, or JavaScript — this approach improves readability and helps your audience engage better with your tutorials or code reviews.
FAQs
Will this work on mobile devices?
Yes, the code blocks are fully responsive and scrollable on smaller screens.
Can I add other languages like PHP or Python?
Absolutely. Just add your own data-codetype="PHP" or similar, and define the styles in your CSS.
Is this method SEO-friendly?
Yes. Since you're using plain HTML with enhanced styling, search engines can still crawl and index your code properly.
What if I’m using a custom Blogger template?
No problem. Just make sure you paste the CSS before </b:skin> and the JS before </body>.
Can I copy this setup to another blog?
Yes. Just copy the CSS and JavaScript into the new theme and reuse the <pre> block format.
#Blogger Tips
#Syntax Highlighting
#Code Formatting
#HTML in Blogger
#JavaScript in Blogger
#CSS Tricks
#Blogger Customization
#Blogging for Developers
#Pre Code Block
#Code Snippets
#Blogspot Code Styling
