How to Add Beautiful Code Snippets in Blogger (Like Github)

Copy-friendly code blocks in your Blogger posts — just like GitHub or VS Code? 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! 

✅ What You’ll Get: Dark-theme code block (gray background) Light-theme option Copy-friendly text (no image) Mobile-friendly scroll 

🔧 Ready-to-Paste Examples Inside:-

<pre style="background: rgb(45, 45, 45); border-radius: 6px; color: #f8f8f2; overflow-x: auto; padding: 15px;"><code style="font-family: Consolas, Monaco, &quot;Courier New&quot;, monospace; font-size: 14px;">

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

</code>
</pre>

OutPut:- 1

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

<pre><code class="language-javascript">

function greet(name) {
  return `Hello, ${name1}!`;
}
</code>
</pre><pre><br /></pre><pre><br /></pre><pre></pre></div>

Output:- 2

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