Help: CodeBlocks + Alternate Syntax Highlighting Broken?

TL;DR: Having trouble getting custom/alternate syntax highlighting to work and not sure how to display double curly braces in code blocks.

So, a few minutes ago, I was all excited on how easy Hugo was to get started. While I really like what I am seeing in a lot of ways, what I do not like is the documentation for syntax highlighting.

From the configuration page:

# color-codes for highlighting derived from this style
pygmentsStyle:              "monokai"
# true: use pygments-css or false: color-codes directly
pygmentsUseClasses:         false

Using this, coupled with the syntax highlighting page, I cannot get sytanx highlighting to work the way you would think it should.

Using defaults, I can do something like (with python pygments installed):

    // I have the `{` escaped because I can't figure
    // out how to show the handlebars in this view:(
    \{\{< highlight go >}}
    package main
    \{\{< /highlight >}}

And as long as pygmentsUseClasses is defaulted to false, I am solid. However, I don’t like the default black background. I figured it should be trivial to update to a different style. This is where things fell apart.

If I change pygmentsStyle to anything other than "monokai", the code block changes to just a <p> tag. If I change pygmentsUseClasses to true, I get no syntax highlighting. Period. Still a code block, and the display is different. But I get no highlighting.

I figured this could be easily overcome. I went into the css that was I thought should be loading. There is public/css/syntax.css and I should be able to just overwrite the css with the values I want. Apparently, I have no clue what I am doing. Adjusting the colors in that file would not change the way code looked on the screen. I started with pulling in pygments github.css, and overwriting it. That did nothing. I tried hand hacking at it. Nothing again. :frowning:

What should have been very straight forward has turned out to be a time sink. All I wanted was pretty syntax highlighting. Any help or guidance y’all can give would be deeply appreciated.

Played around some more. I found out that if I just paste in the css that I want into custom.css, I can get the desired look of code snippets.

I feel like this is not the intended way to do this and it feels like a hack. What is the prefered way to do this?

Also, any tips on displaying {{< something >}} in code block would be great.


Yeah, when I restart the server, custom.css is rewritten and my changes are lost. So, how do I get my own custom css into Hugo? I can’t find that documentation.

{{</* joy */>}} will render as {{< joy >}}.

Put custom.css into the static/ directory. It will be copied over without changes when you run hugo server (for local viewing) or hugo (when you’re ready to finalize and prepare to push to your web server).

awesome, thanks Michael

I just figured that out as you put this up. Thanks for being responsive!

1 Like