Skip to content

bad syntax highlighting with arrow highlighting style, javascript disabled, and dark mode #12399

@gordonwoodhull

Description

@gordonwoodhull

Our fix for flashing in dark mode in #12173 requires us to load both stylesheets and disable one in JavaScript at the top of the body.

Because of, we are susceptible to stylesheet bleed when JavaScript is disabled. The stylesheet for the default mode is always loaded second, but if it doesn't redefine everything, especially background colors, then styles from the non-default stylesheet can be seen.

One symptom is bad syntax highlighting with the default highlighting style in this document.

---
format: html
theme:
  light: united
  dark: slate
_quarto:
  tests:
    html:
      ensureHtmlElements:
        - []
        - ["link[href*=\"-dark-\"]"]
---

## Hello

```markdown
![asdf](asd.png)
```

When JavaScript is disabled, this looks like

Image

This only seems to be an issue with arrow, but arrow is the default.

A workaround is to use a different highlighting-style. I tested the styles listed as working with light and dark mode, and the others all work.

(Note: Highlighting for links has an intentionally dark background in atom-one, gruvbox.)

Metadata

Metadata

Labels

bugSomething isn't workingthemesRelated to HTML theming or any other style related issue (like highlight-style)

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions