GitHub-like syntax highlighting

support
1

I like Hugo a lot. One of the few areas where I’m having trouble is the syntax highlighting.
I’m using pygmentsOptions = "linenos=table" which generates markup like this. This is a table with just one row an two columns. Each column has a pre tag inside. The first sets the line numbers, the second column adds the content.
This is often troubling me with css. For example, Chrome is displaying the first line number with some additional space.

I’d much prefer GitHub’s style. It’s using a table with a row for each line of source code. The line numbers are displayed with a css rule td:before{...}.

Is this possible somehow?

If not, would it be feasible to implement (for me) with the current libraries Hugo is using or would this need a lot of changes all over the place?

Thanks,
Joachim

2

@jansorg,

Is this possible somehow?

You can style the code block(s) using css. For example, this page uses :point_down: these settings in the config

pygmentsCodefences = true
pygmentsCodefencesGuessSyntax = true
pygmentsUseClasses=true
pygmentsOptions = "linenos=table"

The relevant styles in this _syntax sass partial. To style the tables appropriately, borrow table styles from this _base sass partial

Obviously, you could fine tune it further.

If not, would it be feasible to implement (for me) with the current libraries Hugo is using or would this need a lot of changes all over the place?

Umh, for further info, checkout this post.

3

Thank you, this is most helpful! I’ve decided to stick with the highlighting which is available atm. Too much hassle to path hugo and your setup looks nice!