Syntax highlighting seems to fail on some languages

support
1

I’m writing a blog post which includes snippets of code in Julia, and also in the shell. The Julia code, embedded within

#+BEGIN_SRC Julia
... code here ...
#+END_SRC

displays fine. However, if I replace Julia with Bash, then most of the resulting code is invisible. If I replace Julia with Console then almost all the code is invisible. The code is indeed there (it can be highlighted), it’s just the same colour as the background.

This seems weird. I’m using the hugo-clarity theme, and the relevant sections of my config.toml file are:

[markup]
  
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = "--"
    lineNoStart = 1
    lineNos = false 
    lineNumbersInTable = false
    noClasses = true
    style = "monokailight"
    tabWidth = 4

I’ve tried replacing “monokailight” with some other themes: “autumn”, “colorful”, but the problem persists. I can’t find (at least, I haven’t yet) a combination of theme and language which will render console/shell commands.

Is this a known sort of issue, or is it just me?

2

The second one. I tested…

content/foo.org

#+BEGIN_SRC bash
declare a=0
if [[ $a eq 1 ]];
  exit 1
fi
#+END_SRC
3

Thank you - I wonder what’s causing my rendering not to work, then … more digging about needed.

I’ve just switched my Chroma theme to a dark one. For reasons I can’t even begin to guess, much of my code is rendering as white, no matter the theme. At least with a dark theme the code is visible.

4

Check your code and pre stylesheets. Check any imported styles from plugins that are code or typography related. And if you don’t find anything then have a hard critical look at everything with !important in your styles. And if that still does not help then, maybe, show your code.

5

Thank you very much indeed for your advice - I will check all of these things!

6

The hugo-clarity theme uses higlight.js, and the theme’s recommended highlighting configuration is:

[highlight]
codeFences = true
guessSyntax = true
hl_Lines = "--"
lineNoStart = 1
lineNos = true # always set to true # else line numbers won't show at all! even when you toggle them on in the UI
lineNumbersInTable = false # toggling this on (i.e to true) or deleting this line will break the code blocks functionality. Will
noClasses = false
# style = "monokai"
tabWidth = 2

If you use the above configuration, no problems.

Or rely on Hugo’s default values and override as required by the theme.

[highlight]
lineNos = true
lineNumbersInTable = false
noClasses = false
7

Thank you for that. I had in fact set noClasses = true in my config, so I changed it to false, and back to the theme monokailight as an experiment. And again the rendering hid most of the output. And I can’t find any strange js or css files I might be loading which would cause that to happen. Still mystified! However, given my history, it’s no doubt something utterly trivial that I’ve overlooked.

8

Can you share your repository?

9

I lodged an issue on the hugo-clarity github repo, to be told that in fact this theme makes no provisions for changing the syntax-highlighting style. If I wanted to use a different highlight.js style I’d have to fork the repo, or make changes in my own downloaded version of it. This is a pity, as otherwise I like the theme very much. I don’t really want to go ferreting about in the source code, so I’ll just live with the default.