chroma code highlighting issues

[eddelbuettel]

"tl;dr" synopis: chroma does not seem to be configurable

I am having difficulties with code highlighing under this hugo-theme-learn. What I am observing does not make sense, but I am out things to try.

Longer description

I have successfully modified a number of standard style elements, and also used two different Hugo themese as test beds. Both other themes (beautifulhugo as well as the on-purpose-minimal hugo-xmin) seem to do what I want them to do (a simple trac format for fenced code blocks).

With hugo-theme-learn I have no such luck. I generated a number of different syntax.css files, yet none seems to make a difference on rendering -- I end up with mostly 'white on white' code:

If however I remove the header line and not include any, I get plain 'white on black' and clearly no highlighting.

I have seen other suggesting that maybe mermaid plays a role, so I removed that from the footer. No effect.

I really like the rest of this theme and would love to get it to work with code formatted by chroma and adjustable via simple .css files pregenerated.

Any ideas?

[eddelbuettel]

As a follow-up: none of the light themes work: some of the colors become one with the background. Some of the dark theme get altered. Eg here is solarized-dark viewed in Firefox:

That is clearly not the solarized theme. Yet I used the usual hugo chroma thene generation snippet.

Could there be another layer that alters CSS codes before the browser gets to it? I also see slightly different behaviour between Chrome and Firefox.

[matalo33]

Before digging into this too much... are you able to use the built-in syntax highlighting provided by highlight.js.

To investigate this any further I think you might need to provide sample code / a link to your website if the repository is public.

[eddelbuettel]

Thanks for the follow-up -- much appreciated!

I happen to have used pandoc for many years to do this server-side, and I want to do it server side rather than relying on the sanity of each user's browser -- a personal preference supported by Hugo. And I can. It just so happens that ... hugo-theme-learn seems to "filter" the results.

The site I am working on is for a class I will be teaching come January, so it is half-public and half not. But for starters, my mock page with code follows. It is the one I used for the screen-shots above and it clearly does not come the same way as it does in other Hugo themes.

---
title: Code typeset
weight: 500
---

Python

``` Python
while:
    a = 3.0;
```

R

``` R
## some code comment
foo <- function(bar) {
    zigzag(bar)
    txt <- "a text var"
    return(NULL)
}
```

SQL

```sql
select foo from bar where date > '2018-10-01'
```

I can complement this with appropiate settings from the top-level config.toml if you want, and I can certainly create a mock site with the same settings and this page.

[matalo33]

TIL that hugo has built in code-formatting with Chroma. I actually wasn't aware! https://gohugo.io/content-management/syntax-highlighting/

I'll try get to this in the next few days. Just some initial ideas though:

• Are you setting pygmentsCodeFences to true in your site config?
• Have you tried removing highlight.js entirely? (override footer.html and remove the reference to highlight.pack.js, and override header.html to remove nucleus.css)

[eddelbuettel]

TIL that hugo has built in code-formatting with Chroma.

Hehe. It is not that well documented. But yes, seems to work and is fast as usual.

As for your two points:

1. Yes. I use

pygmentsStyle = "trac"
pygmentsUseClasses = true
pygmentsCodeFences = true
pygmentsCodefencesGuessSyntax = true

where trac is, I guess, nominal as I tried different static/css/syntax.css.

2. That sounds promising. I was unaware what nucleus.css was (and googling didn't help) and that was one of the reasons I filed this. I can try both and report back in a day or two.

[matalo33]

When inspecting with Chrome Dev Tools it is possible to show which css file is causing the behaviour you see. At least that narrows down the issue some more to a specific file.

See Figure 2 at this chrome devtools help page. Each css rule has a link to the <file>.css:<line-number> showing you where the rule is being defined.

[eddelbuettel]

Gave 2) a quick spin:

• I already had highlight.pack.js commented out in the footer
• so now I also commented out nucleus.css in the header

What is unchanged is the dark background I did not ask for. Any idea?

[eddelbuettel]

@matalo33 I had actually tried to peek at the CSS analysis from the Chrome "Inspect" view but I guess I am too much of a newb when it comes to CSS styling -- I could not figure it out.

The page I was refering is now public (pending DNS updates "everywhere") so could you take a look at it at this link ? I am basically content with i) having pandoc-alike static rendering and some styling but ii) a little bewildered about the dark background I did not ask for. Is that something fixable?

[eddelbuettel]

@matalo33 If you had a moment to take a look at his page I'd really appreciate it!

[eddelbuettel]

I'd still truly appreciate a second look. I moved the temp page referenced above out of the way as it was temp, but I have a short page with code snippets exhibiting the same issue.

[statnmap]

Dear Dirk @eddelbuettel ,
I saw your call for help on Twitter ;-)
I propose you use to use this in your config.toml.

pygmentsUseClasses = false
pygmentsCodeFences = true
pygmentsCodefencesGuessSyntax = true
pygmentsStyle = "tango"

You can of course choose your own style (https://xyproto.github.io/splash/docs/all.html), but "trac" has no background or borders (although you can add it in your own css).

I modified the theme while also removing highlightjs, but also some colors in theme.css.
I did a fork, with a special branch for that.
You can try it if you want. Tell me if it suits you:

https://github.com/statnmap/hugo-theme-learn/tree/light-chroma

Here the snapshot of the exampleSite with your code:

[eddelbuettel]

Awesome. Will try this evening once I get home.

That said I by now lost trac of what I tried in the past but my current config.toml has:

# code highlighting
pygmentsStyle = "trac"
pygmentsUseClasses = true
pygmentsCodeFences = true
pygmentsCodefencesGuessSyntax = true

I am fairly sure I tried flipping the 'useClasses' toggle.

[statnmap]

On the documentation it is said:

pygmentsStyle
The style of code highlighting. Note that this option is not relevant when pygmentsUseClasses is set.

So you should set pygmentsUseClasses = false

[eddelbuettel]

Just tried it on the laptop. I might have been there once -- it "works" but now the theme does not work. I get some 'white on white' in the first example. The second one works better (ie shell).

[statnmap]

With my fork and its modified theme.css ?

[eddelbuettel]

With my actual site.

[statnmap]

So this is normal that it does not work.
You have to remove some background-color and color attributed to pre and code tags in theme.css.

[eddelbuettel]

FInally fixed thanks to help from @statnmap and also @brodieG who helped me with the CSS side of things. Will test locallty for a day or two and then deploy,.

Many, many, thanks to both of you.

[DBJDBJ]

Ok, have the same problem with C++ syntax (not) highlighting.

What gives? I am hoping for hugo theme learn, next release that will fix this issue.

[JorenJoestar]

Hello everyone!
I am noticing another problem: having nested namespaces also has a weird behaviour.

Writing something like Nes::MemoryController::kPrgRomOffsetBank0 for example gives only Nes::kPrgRomOffsetBank0. Basically the :: will display only the first and the last entry.

Also writing this:
void Nes::Mapper0::PrgWrite( uint16 address, uint8 data ) {
does not give any syntax coloring.

Using {{< highlight cpp >}}...maybe I am doing something wrong ?

Thanks everybody :)

[eddelbuettel]

@DBJDBJ I "eventually" got help from a friend with better CSS "skillz" who showed me how to drill down to find where the entity was set so I had to make another change in, if I recall, two places. I could distill this I presume.

@JorenJoestar I should check if I have that covered.