Setting consistent highlighting for code blocks and inline code

[heinrichcarraro]

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:

---
engine: julia
highlight-style: github
---


```{julia}
#| eval: false
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?

[mcanouil]

Could you try using plain Pandoc? (I don't think Quarto does anything here.)

[cderv]

Looking at the CSS on the source in browser, it seems there is a rule that is overridding the red coloring

I believe it is added by Quarto as it does not show on Pandoc only

We need to find where and why

[cderv]

It seems also specific to Github Highlighting. No problem with default or some others

I wonder if this is on purpose because on github, you can't have coloring for inline code I believe. 🤔

I am curious how this works, because several styles have differences between blocks and inlines 🤔

[cderv]

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)

I'll also look if we have an issue about this already as it remind me of something 🤔

[heinrichcarraro]

Thank you so much already for all the information. Is there anything I can still do from my side to help with this?

[heinrichcarraro]

Just played around a bit to find some quick fix for now. Including the following script using include-after-body seems to give a quick but not very elegant fix for now.

document.addEventListener('DOMContentLoaded', () => {
  // Select all <code> elements in the document
  const codeElements = document.querySelectorAll('code');

  codeElements.forEach((codeElement) => {
    // Check if the <code> element does not have a <pre> parent
    if (codeElement.parentElement.tagName.toLowerCase() !== 'pre') {
      // Create a new <span> element
      const spanElement = document.createElement('span');

      // Move all child nodes of <code> into the new <span> element
      while (codeElement.firstChild) {
        spanElement.appendChild(codeElement.firstChild);
      }

      // Append the <span> as the first child of the <code> element
      codeElement.appendChild(spanElement);
    }
  });
});

I additionally changes the background color to transparent for standard code elements.