Add syntax highlighting to gh-pages

Question

Is there an easy way to add syntax highlighting to my various plugin\'s gh-pages using github\'s Pygments?

I know that every page runs through the Jekyll engine and

Answer 1

The default syntax highlighter is rouge (equivalent to highlighter: rouge in your _config.yml file). With rouge, if you write a code block like this in markdown:

~~~js
let z = 26;
~~~

You can expect to get an HTML block like this:

 

  

   let z = 26;
  
 

Then all you need is a CSS file (if you're using a GitHub Pages Theme, you will get the CSS automatically). I'm not sure where the CSS is officially supposed to come from, but

• here is a CSS file for a light background
• here is a CSS file for code in a dark rounded rect (the rest of the site may use a light or dark background).

Feel free to customize the css to your liking.