Nolan Nicholson

Rendering Code Snippets on a Static Website

Rendering code in a pleasing format on a webpage - including bells and whistles like line numbers and syntax highlighting - is an easy thing to take for granted after spending a lot of time with Markdown renderers like the one GitHub offers. But bringing the same capability over to a static webpage with no "help" from outside scripts or compilers, is not trivial. Making the following appear took a little bit of work:

#include <iostream>

int main() {
std::cout << "Hello World" << std::endl;

What goes into rendering this?

Neither of the above is a huge problem - but it conflicts with two things that some people might be after:

I'd previously thought there was a lot of craft in writing HTML code from scratch, and that it was the way to go for constructing a static website. "Compiling" HTML was only really worth the extra infrastructure for running a dynamic website. I am now convinced of the opposite: even for small static websites, it probably makes more sense to handle things like code inclusion and highlighting (as well as things like using the same header and footer across different pages) by using a templating engine (or some other tool that assembles the HTML for you.) That is the subject of this page.