How to use specific font with highlight.js

Question

Updated with the proper link to the example

I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see here for example of my site page

I would like to use another font, like sans-mono or something more neat looking, like it shows on Highlight.JS web page here

I'm not super familiar with Javascript and CSS, just trying to use them. Is there an easier way to tell Highlight.JS to use specific font? Assuming I have font files available.

Thanks ZeeKay

Answer 1

Add this to your CSS:

pre > code {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
}

This will use the first font in that list that is available on the user’s system. Sometimes fonts have different spacing that their real names, so for example if "Sans Mono" doesn’t work, try "SansMono". Make sure to put monospace last so that at least some suitable font is chosen if the user doesn’t have any of the listed fonts.

If this doesn’t work, maybe it’s due to a selector specificity problem, where the default styles provided by highlight.js are overriding your own styles. Something that will help avoid this is putting the <link> that loads your CSS file after the one to load the highlight.js CSS file. If this doesn’t work, you will have to make the pre > code selector more specific, such as changing it to #main pre > code if all page content is wrapped in an element with the ID main.

If you’re not sure how to add CSS, the easiest way is to put it in the HTML template surrounded by <style></style> tags. Though it’s better to put it in a CSS file and reference it with <link rel="stylesheet" href="myStyles.css">.