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

Copy-friendly code blocks in your Blogger posts — just like 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. No plugins, no images — just pure HTML & CSS. Copy the examples, paste into your post, and you’re done!

Paste this code:-

 

<!-- 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>

Output above code:-

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Blogger"));