Skip to main content

How to prettify code snippets in Blogger and BlogSpot posts

Programmers and people who post about code know that syntax highlighting (code coloring) can help readers differentiate code blocks from other sections of content. Adding that feature to Blogger and BlogSpot posts is just a matter of copy-pasting some JavaScript.

Here's an easy example:
```
<pre>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script>let code = document.querySelectorAll("pre, code"); code.forEach( el => el.classList.add("prettyprint") );</script>
</pre>
```

You can copy-paste that right into an HTML/JavaScript gadget and see results right away.

## How it works
That snippet relies on the [Prettify.js](https://github.com/google/code-prettify) library provided by Google itself. The first script section just references that library and loads it into the page.

The second script section adds the "prettyprint" CSS class to every **<pre>** and **<code>** element on the page. That's the CSS class Prettify.js uses to know which elements to add the syntax coloring to, which in this case will be every code element.

If there's a particular code element you don't want to be affected by it, you can simply add the *nocode* class to it.

For example:
```
<pre class="nocode">
let x = "Hello";
console.log( x + " world!" );
</pre>
```

## Other options
There are some other options for code formatting, the method above just happens to be relatively easy and automatically colors all code elements.

Here are a few more options:
- Post snippets to [GitHub Gist](https://gist.github.com/) and get the code to paste in your blog.
- Add inline CSS styles to your code.
- Use a service like Hilite.me that gives you code with inline CSS styles.
- Use a Markdown solution that automatically styles code.

## More discussion
There's been a lot of talk on this topic as seen through multiple questions on StackOverflow. I'll try and cover all the solutions here but it's always helpful to know all options so I'll reference the discussions here.

StackOverflow discussions:
- [Formatting code snippets for blogging on Blogger](https://stackoverflow.com/questions/679189/formatting-code-snippets-for-blogging-on-blogger)
- [How to use Prettify with Bogger and BlogSpot](https://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot)
- [How to show code snippets in blogs](https://stackoverflow.com/questions/3207758/how-to-show-code-snippet-in-blogs)

Hope that helps. Any questions, ask in the comments!

Comments

  1. Can we entered `code` blocks here in comments?

    Just wondering if we can use HTML or if our scripts persist in comment content?

    ReplyDelete

Post a Comment

Popular posts from this blog

How to use FontAwesome icons on Google Blogger

FontAwesome provides an outstanding set of icons for anyone to use on the web, no cost. To use the icons on Blogger: - In your dashboard, go to **Theme**. - Click *Edit HTML*. - Type `CTRL-F` (`CMD-F` on Mac) to do a search. - Type */head* and press `Enter`. - Click to the left of the **</head>** tag to place your mouse cursor there. - Paste in the following code: `<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" rel="stylesheet"></link>` - Click *Save theme*. That's it. Now, you should be able to use the icons by copy-pasting the codes they provide like this: `<i class="fas fa-user-astronaut"></i>` You can paste that code into an HTML/JavaScript widget or directly add it to posts by using the HTML option in the editor. For optimal use, get the link code [Fo

Use Blogger Again

Google's Blogger.com (also including BlogSpot.com) is a tried and tested platform with vastly unused potential. Most people gravitate toward WordPress.com because of its greater popularity and admittedly, much more accessible and capable interface for content creators. As a result, people are generally unaware of some of Blogger's great benefits, among which is its notable extensibility through JavaScript. This simple blog aims to highlight some of the tricks we can pull off here at Blogger, with a special focus on CSS for design and JavaScript for adding front-end features.