How to Add Code Syntax Highlighting to Blogger
On my blog I always wanted to format source code in Python and a couple more languages, but couldn’t find a convenient way. Until I read a tutorial on adding syntax highlighting to Blogger blogs like mine. The Blogger post composer actually provides the monospace Courier font that may be used for source code, but it works well only for inline text . If I apply the Courier font to a block of code, the composer renders each line as a separate paragraph. This leaves too much vertical space that makes the code look ugly. A workaround is to switch to the HTML view in the composer and wrap the block within <pre> ... </pre> tags, which insert the correct line spacing. However, the code doesn’t stand out on the page and there’s room for improving its scannability and visual impact. Fortunately, Blogger is an old dog I can teach new tricks to, like the setup the tutorial I found presents. A Python code snippet with syntax highlighting rendered by highlights.js in a post of the Moo