How to Add Beautiful Code Snippets in Blogger [ like VS Code ]

Do you want to display copy-friendly code blocks in your Blogger posts—just like the VS Code Editor? In this quick guide, I’ll show you two super-simple ways to add syntax-highlighted, gray-background code snippets that your readers can select and copy in one click.

The best part? No plugins, no heavy images—just pure HTML & CSS. Simply copy the examples below, paste them into your post, and you're good to go!

Step 1: The Setup (HTML View)

Switch your Blogger post editor to HTML View and paste the following code where you want your code snippet to appear. This includes the necessary libraries and styling for the professional look:

<!-- 1. VS-Code look (dark) + line-numbers -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

<style>
.line-numbers{padding-left:3.5em!important;counter-reset:linenum}
.line-numbers .line-numbers-rows{position:absolute;left:0;top:0;width:3em;border-right:1px solid #555;color:#888;font:14px/1.5 monospace;user-select:none;pointer-events:none}
.line-numbers-rows>span{display:block;counter-increment:linenum}
.line-numbers-rows>span::before{content:counter(linenum);display:block;text-align:right;padding-right:.8em}
</style>

<!-- 2. YOUR CODE SNIPPET -->
<pre class="line-numbers language-javascript"><code>
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Blogger"));
</code></pre>

Final Result

Once you publish or preview your post, your code block will transform into a professional-grade editor window like this:

Live Preview:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Blogger"));