Code Syntax Highlighting Not Working in my Theme

[narner]

I was following this guide here to add support for code syntax support:
 
https://www.tomspencer.dev/blog/2018/08/03/deploying-a-hugo-powered-site-to-netlify-with-source-code-syntax-highlighting/
 
Doing so, I added these lines to my config.toml:
 

pygmentsCodeFences = true   # Enable triple backtick 'code fence' markdown
pygmentsUseClasses = false  # Add inline styles, no need to compile extra CSS

 

However, this is what code snippets look like if I select a language:
 

 

[narner]

This is what it looks like without any language selection:

[jmooring]

First, the article you reference is very old.

Second, there is no need to include these lines in your site configuration:

pygmentsCodeFences = true   
pygmentsUseClasses = false  

The pygmentsXXX configuration keys were replaced a long time ago. See:
https://gohugo.io/getting-started/configuration-markup#highlight

Third, it would be helpful to see:

• Your entire site configuration
• Your markdown

Or better yet…

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[narner]

Of course, and thank you for your assistance so far!

Here’s the link to the repo:

GitHub - narner/MyWebsite

[jmooring]

https://github.com/narner/ezhil/blob/master/static/css/main.css#L190-L200

Replace all that with:

.highlight pre {
  padding: 1em;
}