Having trouble implementing Code Prettify in Jekyll—want to use `` instead of <pre></pre>

Question

I've been trying to implement Code Prettify in my Jekyll blog. I followed some guides and was able to implement it, but it's not ideal. This is what I did:

1- I went to _includes and added the necessary files in head.html:

The sunburst theme:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>

The CSS file of the theme (it is in my css folder on GitHub):

<link rel="stylesheet" href="/css/prettify.css" rel= 'stylesheet' type='text/css'>

2- For example, I used the tag <pre class= "prettyprint"></pre> to test it. As you can see in this post (the code block is at the bottom of the page), it does work. If you notice, you see that <iostream> is missing because I used <pre></pre> and therefore it sees the <> characters, takes them as HTML and doesn't show <iostream>. This is how it looks:

I could use HTML entities to fix it, but this is not ideal. I've searched for 2 hours and couldn't find a reliable source to fix this.

---

So my question is:

Is it possible to make Code Prettify work in markdown, using `` instead of <pre></pre>? If not, is there another way to implement it in Jekyll? Or make it easier to use? If none of these are possible, is there a better alternative to Jekyll which supports Code Prettify?

If you need to see other files please do check my repository.

Answer 1

With Jekyll, you can use two highligting methods :

backtick-style fenced-code

In _config.yml, set :

kramdown:
  input: GFM

Highlight your code like this :

``` c
include <iostream>
using namespace std;

int main () {
cout << "and then there were none" << endl;
return 0;
}
```

With highlight liquid tag

{% highlight c %}
include <iostream>
using namespace std;

int main () {
cout << "and then there were none" << endl;
return 0;
}
{% endhighlight %}

Styling

Styles are from _scss/_syntax-highlighting.scss.

Answer 2

The plugin I'm currently using for code highlighting is "jekyll-rouge", which supports ''' style markdown well:

https://sacha.me/articles/jekyll-rouge/