[Solved] Syntax highlighting changed with Hugo 0.29 from 0.27

support
1

I set up my site using the pygments syntax highlighting in hugo 0.27 using code fences. I didn’t use the built in style because the highlighted code was in dark boxes, so I used default, which worked fine with.

pygmentscodefences: true
pygmentsStyle: default

On upgrading to hugo 0.29 using the same config, the highlighting changed to highlighted code in dark boxes. After experimenting I am now using emacs style which has a pale background. However it has an annoying light grey bounding box around each line of the highlighted code which didn’t happen with pygments. I’ve looked through the new syntax highlighting docs and can’t see anything I’m missing, apart from reverting to using pygments.

I haven’t investigated whether this could be down to the theme I am using, which is theme-hugo-foundation6.

2

That’s because the chroma css sets/overrides background color for the blocks with .chroma class too. You might need to tweak the theme you are using… or override the chroma-set background color. Use your browser Inspector (Ctrl+Shift+I) to know more on what’s going on…

My gut feeling is that you too are seeing something like this? https://github.com/alecthomas/chroma/issues/41

3

Yes, except I’m getting a border as well as a background colour. It’s coming from _base.scss according to the browser inspector. I looked at the Hugo News posts about the new versions, but ignored the info about chroma because I thought I wasn’t using it, whatever it was. I’m going to have to read it again.

code {
padding: $code-padding;

border: $code-border;
background-color: $code-background;

font-family: $code-font-family;
font-weight: $code-font-weight;
color: $code-color;

}

I haven’t tracked down where $code-border and $code-background are coming from.

4

I found it’s due to Hugo adding <code class="language-java" data-lang="java"></code> blocks around the highlighted code picking up styles from the theme. So that might be Hugo and it might be Chroma. I commented out the styles anyway. :sunglasses:

5

I’m curious to hear why Hugo adds the data-lang data attribute. Do you perhaps know that?

If I Google that attribute, I find that it can be used with JavaScript… But wasn’t the point of the Chroma syntax highlight to have no client-side JavaScript code for highlighting the code? :slight_smile:

6

Me too! I use the class="language-java" portion to create language name overlays. So the data-lang="java" seems redundant.

7

I looked in it a bit more closely, and it seems to come from this 2015 Hugo issue. It’s not very clear to me why that person requested it (I don’t see how it helps with server-side syntax highlighting, which seems redundant too because the static HTML that Hugo generates already contains syntax highlighting).

Although the argument also seems to be at that time that “Jekyll also does this”.

The data-lang attribute is added by the way here in the Hugo code.