QUESTION: code fences not highlighted as expected

[end2endzone]

Question

Hi. I am new to Hugo. I am trying to setup highlighting of code fences. I can't understand why I can't get visible line numbers and why does cpp, html, txt content is rendered centered (each line is centered in the hightlight area). Inspecting the code, I think the line numbers are output as HTML but there are some css that makes them invisible.

I tried to follow Hugo's highlighting instructions as much as possible but I get the feeling that I am missing something obvious.

Note: I am assuming the issue comes from this theme as I tried with another theme and the code fenced were rendered as expected. If I am wrong, feel free to direct me to the right resource for getting help.

My config.toml:

(I am skipping [menu], [Languages] and [social] since they are identical to the exampleSite's config.toml.

# For a description of these parameters, please visit the theme wiki.
# https://github.com/pacollins/hugo-future-imperfect-slim/wiki/config.toml
baseurl                 = "http://www.end2endzone.com"
DefaultContentLanguage  = "en"
title                   = "end2end zone"
theme                   = "hugo-future-imperfect-slim"
#theme                   = "soho-master"
paginate                = 3
disqusShortname         = ""
googleAnalytics         = ""
pluralizeListTitles     = false
disableLanguages        = []

[markup.goldmark.renderer]
  unsafe                = true

# https://gohugo.io/getting-started/configuration-markup#highlight
[markup.highlight]
  anchorLineNos = false
  codeFences = true
  guessSyntax = false
  hl_Lines = ''
  lineAnchors = ''
  lineNoStart = 1
  lineNos = true
  lineNumbersInTable = true
  noClasses = true
#  style = 'monokai'
  tabWidth = 2
  
[module]
  [module.hugoVersion]
  extended              = true
  min                   = "0.62.0"

[outputs]
  home                  = ["html", "json", "rss"]

[params]
  enableCDN             = false
  cssFiles              = ["default"]
  jsFiles               = ["default"]
  highlightjs           = true
  highlightjsTheme      = ""
  highlightjsLang       = []
  viewMorePostsLink     = "blog"
  readingTime           = true
  imageStretch          = "vertical"
  removeBlur            = false
  socialShare           = ["twitter", "facebook", "reddit", "linkedin", "pinterest", "email"]
  hideEmptyStats        = false

  [params.meta]
    description         = "end2end zone"
    author              = "Antoine Beauchamp"
    favicon             = false
    svg                 = true
    faviconVersion      = "1"
    msColor             = "#ffffff"
    iOSColor            = "#ffffff"

  [params.header]
    navbarTitle         = "Future Imperfect"
    dynamicTitles       = true
    searchMenu          = true
    shareMenu           = true
    languageMenu        = true

  [params.intro]
    header                = "end2end zone"
    paragraph             = "My life dumped to a web site"
    rssIntro              = true
    socialIntro           = true
    hideWhenSingleColumn  = false
    alwaysOnHomepage      = false

    [params.intro.pic]
      src                 = "img/main/logo.jpg"
      shape               = "circle"
      width               = ""
      alt                 = "Hey that's me"

  [params.sidebar]
    about               = "Hey I'm Antoine author of end2end zone. Take a couple of minutes to get to know me a little better."
    postAmount          = 5
    categories          = true
    categoriesByCount   = true

  [params.footer]
    rssFooter           = true
    socialFooter        = true

  [params.utterances]
    enabled             = false
    repo                = ""
    issueTerm           = "pathname"
    issueNumber         = ""
    label               = ""
    theme               = "github-light"

  [params.staticman]
    enabled             = true
    api                 = ""  # No Trailing Slash
    gitProvider         = ""
    username            = ""
    repo                = ""
    branch              = ""

    [params.staticman.recaptcha]
      siteKey           = ""
      encryptedKey      = ""

My testfile.md

---
title: 'Test highlighting'
author: end2end
date: 2021-08-20
categories:
  - test
tags:
  - test
---

# cpp - code fences
```cpp
// Simple C++ program to display "Hello World"
// Header file for input output functions
#include<iostream>
using namespace std;
// main function - where the execution of program begins
int main()
{
    // prints hello world
    cout<<"Hello World";
    return 0;
}
```

# txt - code fences
```txt
Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.
```

# html - code fences
```html
<html>
 <head>
 </head>
 <body>
   <h1>Hello World<h1>
 </body>
</html>
```

# unspecified - code fences
```
The greatest glory in living lies not in never falling, but in rising every time we fall. -Nelson Mandela
The way to get started is to quit talking and begin doing. -Walt Disney
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking. -Steve Jobs
If life were predictable it would cease to be life, and be without flavor. -Eleanor Roosevelt
If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough. -Oprah Winfrey
If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success. -James Cameron
Life is what happens when you're busy making other plans. -John Lennon
```

Generated html

generated html.txt

Generated html through Chrome inspection

inspected html.txt

Rendered HTML with Chrome

[end2endzone]

I was hoping to get help by asking a question but no one was able to help in 27 days.
This problem is fairly easy to reproduce:

• Create a new hugo site.
• Install hugo-future-imperfect-slim theme.
• Copy themes\hugo-future-imperfect-slim\exampleSite to the root of the new site.
• Configure config.toml to show hightlights as the following:

[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ''
    lineAnchors = ''
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = false
    noClasses = false
    #style = 'monokai' # This field is not required when noClasses == false.
    tabWidth = 2

• Genereate a monokai css theme with the command hugo gen chromastyles --style=monokai>static\css\syntax.css as per Hugo's syntax highlighting.
• Add the new css file to cssFiles in your config file. Locate the line cssFiles in section [params] in your config.toml and change it for the following: cssFiles = ["default", "css/syntax.css"].

The code fences will keep their white background and the syntax highlighting will not be as per the monokai theme.

[end2endzone]

I was able to investigate and track down the problem. This problem is not related to hugo but is actually specific to this theme. For example, if you configure another theme, the code sections are properly rendered. I think it is because this theme insert css classes in highlighted code which overrides [markup.highlight] settings.

More specifically, the css classes hljs and hljs-subst and the css for pre code and code are interfering with Hugo's build-in highlighting classes.

I was able to partially workaround the problem by overriding some files of the theme. For example, I created the following 2 blank files:

• assets\css\dark.css
• assets\css\default.css

These file were empty which prevented my site to define hljs and hljs-subst classes.

A better fix would be to not generate HTML with the hljs and hljs-subst classes. I think there is probably a template somewhere in the theme's code that actually handles this. I may have to override it but I was not able to track which template file handles highlighting.

I am still looking for help in order to tackle this problem and get a better fix. Any help is appreciated.