QUESTION: code fences not highlighted as expected about hugo-future-imperfect-slim HOT 2 OPEN

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.

from hugo-future-imperfect-slim.

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.

from hugo-future-imperfect-slim.