Help: CodeBlocks + Alternate Syntax Highlighting Broken?

support
1

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

Longer:
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.

2

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.

Thanks!

3

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.

4

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

5

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).

6

awesome, thanks Michael

7

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

1 Like