Problems with visibility of .Rmd files after header

I tried to publish a post as .Rmd file with a YAML front matter. Everything works fine until a header appears (e.g. ## My Title). Header and all the text thereafter appears with an extreme light gray, so that one even almost can’t read the text.

But there is no problem with the exact same file using .Rmarkdown file ending instead of a.Rmd ending. .Rmarkdown is rendered by Blackfriday whereas .Rmd is rendered by Pandoc. There are slight differences, but there shouldn’t be any different with standard Markdown. I tested .Rmd- files with other Hugo themes and had no problems.

I tried it also with a fresh installation out of the box so that I could prevent an issue of some changes I already had made to the template. What could be the problem?

[petzi53]

Frankly, I am not an expert in CSS but I believe the problem has to do with static/mermaid/mermaid.css. If you delete the following code line opacity: 0.2; or set opacity: 1; header in .Rmd files will work again.

/** Section styling */
.section {
  stroke: none;
  opacity: 0.2;
}

The same code segment can be found inmermaid.forest.css and mermaid.dark.csstoo. I do not know if there are some side effects but the sample page mermaid.md seems to work well.

If one does not want to do this change one still has the option to use html-codes for headers in .Rmd files, but then one will lose some features of Pandoc like implicit_header_references.

PS.: I noticed the same problem in the learn-theme where this theme is a partial porting.

[byzheng]

I still have the same problem. I think it is related with the loading order of theme.css and mermaid.css. The new changes in theme.css is overwrote by mermaid.css. It seems need to this line from script.html into header.html. Not sure this change will cause any side effects to others

“<link href=”{{“mermaid/mermaid.css” | relURL}}" type=“text/css” rel=“stylesheet”/>"