Inconsistent highlighting between code block and inline code

[cderv]

Discussed in #11910

^{Originally posted by heinrichcarraro January 20, 2025}

Description

I just noticed that the highlighting style of inline code and code blocks is entirely different. Is there some way to achieve a consistent highlighting style.

Example (Edited by @cderv to remove engine):

---
highlight-style: github
---


```{.julia}
Y::AbstractMatrix
```

And here the inline version `Y::AbstractMatrix`{.julia}.

The code block is correctly formatted using the GitHub style (as much as I can see), but the inline code has a completely different highlighting.

From what I can see in the produced html and css, this seems to be the case because there is a span missing right after the code opening. The current html for the inline code is something like

<code class="sourceCode julia">Y<span class="op">::</span><span class="dt">AbstractMatrix</span></code>

If I change this to

<code class="sourceCode Julia"><span>Y<span class="op">::</span><span class="dt">AbstractMatrix</span></span></code>

then the highlighting is correct, only the background is still wrong. Is there some way I can achieve this without some additional javascript?

[cderv]

Putting back my comment from #11910 (reply in thread)

---

So this hapens when the style have a color for Normal

quarto-cli/src/resources/pandoc/highlight-styles/github-light.theme

Lines 171 to 174 in e4a8898

	"Normal": {
	"selected-text-color": "#24292e",
	"text-color": "#24292e"
	},

This is assigned to CSS rule in our Quarto processing

quarto-cli/src/command/render/pandoc-html.ts

Lines 475 to 486 in e4a8898

	[
	"pre > code.sourceCode > span",
	"code span",
	"code.sourceCode > span",
	"div.sourceCode,\ndiv.sourceCode pre.sourceCode",
	]
	.forEach((selector) => {
	lines.push(`\n${selector} {`);
	lines.push(...cssValues);
	lines.push("}\n");
	});
	}

but it gets higher precedence than other rules created for other tokens

quarto-cli/src/command/render/pandoc-html.ts

Lines 470 to 474 in e4a8898

	if (abbr !== "") {
	lines.push(`\ncode span.${abbr} {`);
	lines.push(...cssValues);
	lines.push("}\n");
	} else {

So this does not seem right.

This is old code from Charles, so I need to understand it well before trying to change anything, but it does not seem right 🤔

For context, I believe this processing exists because we need to support more highlight style than Pandoc itself (highlight-style: github is one of them)

Something does not seem correct in how we process Normal style in them file