# GitHub-like syntax highlighting

**URL:** <https://discourse.gohugo.io/t/github-like-syntax-highlighting/20694>\
**Category:** support\
**Created:** [September 10, 2019, 8:24am UTC](https://discourse.gohugo.io/t/github-like-syntax-highlighting/20694 "2019-09-10T08:24:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jansorg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jansorg/32/10259_2.png) [@jansorg](https://discourse.gohugo.io/u/jansorg)\
**Post date:** [September 10, 2019, 8:24am UTC](https://discourse.gohugo.io/t/github-like-syntax-highlighting/20694/1 "2019-09-10T08:24:27Z")

</div>

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](https://plugin-dev.com/intellij/custom-language/code-completion/#extension-point). 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

---

<div class="post-metadata">

**Author:** ![Weru](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/weru/32/7300_2.png) [@Weru](https://discourse.gohugo.io/u/Weru)\
**Post date:** [September 10, 2019, 12:54pm UTC](https://discourse.gohugo.io/t/github-like-syntax-highlighting/20694/2 "2019-09-10T12:54:10Z")

</div>

@jansorg,

> Is this possible somehow?

You can style the code block(s) using css. For example, [this page](https://rooms.netlify.com/post/emoji-support/#inline-css) uses 👇 these settings in the config

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

```

The relevant styles in [this \_syntax sass partial](https://github.com/onweru/newsroom/blob/master/assets/scss/_syntax.scss). To style the tables appropriately, borrow table styles from [this \_base sass partial](https://github.com/onweru/newsroom/blob/master/assets/scss/_base.scss#L116-L139)

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](https://sheppard.in/2018/syntax-higlighting-problems/).

---

<div class="post-metadata">

**Author:** ![jansorg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jansorg/32/10259_2.png) [@jansorg](https://discourse.gohugo.io/u/jansorg)\
**Post date:** [September 11, 2019, 8:43pm UTC](https://discourse.gohugo.io/t/github-like-syntax-highlighting/20694/3 "2019-09-11T20:43:16Z")

</div>

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!