Note: One alternative is to use this Prism.js Jekyll Plugin, the advantage of using google-code-prettify is that it can be used with standard markdown (indented code blocks) rather than using liquid tags like {% prism %}. Prettify will guess which language your code blocks contain and highlight appropriately.
Grab the google-code-prettify sources and include them in the <head> of your page template, for Jekyll you will want to edit layouts/default.html (tailor paths to directory structure):
<link rel="stylesheet" href="/css/google-code-prettify/prettify.css">
<script src="/js/google-code-prettify/prettify.js"></script>This JS snippet adds the prettyprint class to <pre> tags and runs prettify:
<script>
// 1. Add the `prettyprint` class to `pre` tags. - When using Jekyll you *could* omit this step
// by using {% highlight prettyprint %} in your posts (which adds it to the `code` tags),
// *BUT:*
// - The method used here allows you to keep posts markdown-only (just indent for code-blocks), for portability
// - {$ highlight %} tags seem to break with Pygments disabled anyway (i.e. if you put a `#` within a code-block)
// - the container styling fix in the following step will not be as straightforward
[].forEach.call(document.getElementsByTagName("pre"), function(el) {
el.classList.add("prettyprint");
});
// 2. Run
prettyPrint();
</script>(Optional) Less-cramped container styling:
<style>
pre.prettyprint {
padding: 8px 12px;
border: 1px solid #bbb;
border-radius: 4px;
}
</style>