Add syntax highlighting to gh-pages

user_145346 0
Viewed 10762

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 provides syntax highlighting (ref). But I don't want to install a blog. I just want syntax highlighting applied to the code blocks in my gh-pages.

I guess I could always just include a different plugin with my gh-pages...

github-pages syntax-highlighting github
5 Answers

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:

<div class="language-js highlighter-rouge">
 <div class="highlight">
  <pre class="highlight"><code>
   <span class="kd">let</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">26</span><span class="p">;</span>
  </code></pre>
 </div>
</div>

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

Feel free to customize the css to your liking.

Qwertie_228200
Related