Pygments howto

support
1

I have hugo 0.12 and pygments installed.

Reading the docs it seems that the highlight shortcode just works out of the box.

My content:

```
{{ % highlight html %}}
 <p> ciao </p>
{{ % /highlight %}}

The output:

...
<p>```
{{ % highlight html %}}
  <p> ciao </p></p>
<p>{{ % /highlight %}}</p>
...

The output is not as expected, what I miss?

greetings
Attilio

2

This is fixed in 0.13-DEV, but in 0.12 I believe you have to indent the inner content by 4 chars.

3

Do you have a space between the {{ and the % characters? That space is in the example because of a quirk with the Hugo rendering - it shouldn’t be in your markdown.

With v0.12, the following works (where the dots are replaced with spaces):

{{% highlight html %}}
....<p> ciao </p>
{{% /highlight %}}

That gives the output:

<div class="highlight" style="background: #272822"><pre style="line-height: 125%"><span style="color: #f92672">&lt;p&gt;</span> ciao <span style="color: #f92672">&lt;/p&gt;</span>
</pre></div>

As @bjornerik said, you have to indent the code by 4 to prevent Markdown from changing the HTML. In your markdown, you wouldn’t fence in the code using backticks, either.

4

Thanks!

I confirm that now pygmetize works with the highlight html example.

When I try to render a c snippet of code, with a default theme like herring-cove or hyde, the rendering is not correct: the braces and the variable name in the declaration are missing:

## some demo code

{{% highlight c %}}
    int c;

    if(c) {
	    return c;
    }
{{% /highlight %}}

render like this:

some demo code

int

if
   return

Do you know if there are themes or recipes to make it work with c language?

Attilio

5

No idea, but you could try with some of the other “c-similar” lexers, like cpp?

http://pygments.org/docs/lexers/

6

Attilio, I ran the same but got different results. This is with v0.12 on a Mac.

I created the highlights file.

$ cat content/post/sample.md 
+++
date = "2014-12-02T10:51:45-06:00"
draft = true
title = "sample"

+++
## some demo code

{{% highlight c %}}
    int c;

    if(c) {
	    return c;
    }
{{% /highlight %}}
$

Ran the server.

$ hugo --buildDrafts server
1 of 1 draft rendered 
0 future content 
1 pages created 
0 tags created
0 categories created
in 105 ms
Serving pages from /Volumes/G-DRIVE Data/Sites/playground/public
Web Server is available at http://localhost:1313
Press ctrl+c to stop

The browser looks right.

some demo code

int c;

if(c) {
    return c;
}
Home

The generated HTML file looks right.

$ cat public/post/sample/index.html 
<!DOCTYPE html>
<html>
<title>sample</title>
<body>


<h2 id="toc_0">some demo code</h2>

<div class="highlight" style="background: #272822"><pre style="line-height: 125%"><span style="color: #66d9ef">int</span> <span style="color: #f8f8f2">c;</span>

<span style="color: #66d9ef">if</span><span style="color: #f8f8f2">(c)</span> <span style="color: #f8f8f2">{</span>
    <span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">c;</span>
<span style="color: #f8f8f2">}</span>
</pre></div>

<p><a href="/">Home</a></p>
</body>
</html>
$

What does your HTML file contain?

7

Hy Michael,

The html is ok, the problem is just a “wrong” stylesheet setting.

I’m just learning hugo, so I dont know if this is the best way, but changing the pre.background-color into hyde theme poole.css:

pre {
   ...
   background-color: #424242;
}

resolve the problem.

The only thing to note is that each pygment language style could have different color setting, so the tuning must be done for each highlighted language.

maybe config options pygmentsstyle is the right way, but I’m actually not able to understand how it works.

greetings
Attilio