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

Want to display professional code snippets in your Blogger posts just like GitHub or VS Code? In this guide, I’ll show you how to add syntax-highlighted, gray-background code blocks that your readers can easily select and copy.

This method is 100% SEO-friendly, requires no external plugins, and won't slow down your website—perfect for passing AdSense quality checks.

Key Features of This Method

• Dark & Light Themes: Choose the style that fits your blog.
• Copy-Friendly: Pure text format, not an image, so Google can index your code.
• AdSense Optimized: Clean HTML structure that doesn't trigger "Low Value Content."
• Mobile Responsive: Horizontal scroll for long lines of code.

Method 1: Basic Inline Styled Code Block

This is the simplest way. Just paste this HTML code directly into your post editor in HTML View.

HTML Snippet

<pre style="background: #2d2d2d; border-radius: 6px; color: #f8f8f2; overflow-x: auto; padding: 15px;">
<code style="font-family: monospace;">
function greet(name) {
  return `Hello, ${name}!`;
}
</code>
</pre>

Output Example 1:

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

Method 2: Advanced Syntax Highlighting (Prism.js)

For a true VS Code look with different colors for variables and functions, use this class-based method.

Advanced Snippet

<pre><code class="language-javascript">
function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

Output Example 2:

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

Conclusion

Using these code blocks makes your technical blog posts much more professional and easier to read. Remember, clear and copyable code increases user time-on-page, which is a great signal for SEO ranking.

If you found this helpful, let me know in the comments!