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!
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!
Can we entered `code` blocks here in comments?
ReplyDeleteJust wondering if we can use HTML or if our scripts persist in comment content?