Actual code almost invisible in preview of literate documents

[RossBoylan]

The Problem

As seen in this shot it is almost impossible to read the code (on the left) in the preview window (on the right).

I believe I'm running with the standard dark+ theme.

I have tried various things to tweak markdown coloring, but I don't think any of them are affecting this.

Desired Outcome

Easily visible code in the preview.

This could be achieved by changing the defaults, but I assume they've been working for others. Perhaps the choices should be theme sensitive? Or the installation process changed to give the extension settings fuller control?

.html Files Likely have a Problem, but Not this One

Viewing the generated .html file with FireFox shows apparently unstyled black and white and the code is perfectly legible. The generated .html file has <link rel="stylesheet" type="text/css" href="./style.css"> in the header, but there is no style.css file in the directory with the .html file. Which is probably a separate issue.

Analysis

Used this tip to see what was going on. Seemingly the code gets a color = #d4d4d4, a light grey/unsaturated red, from --vscode-editor-foreground inherited from html in markdown.css from Resources/app/extensions/markdown-language-features/media. If I interactively edit the active color element it changes the color of the code (green in my test) and makes it easily visible.

In contrast, keywords show as blue--but only after I edit the basic color as above--and are coming from hljs-keyword from the style.css in the literate extension.

There are several anomalies:

1. The initial color shows as light grey, but the very faint code that I do see appears blueish. Perhaps a result of blending with the background color, or automatic logic to introduce some contrast.
2. The interactive color picker shows the initial color as an extraordinarily unsaturated red. Again, not blue.
3. Resetting the color interactively seems to reset the alpha, even for code whose color is controlled by something else like hljs-keyword.
4. I didn't see alpha settings associated with the color, but it looks as if they are being used somehow. I did see alpha settings (I presume: a 4th number on a color specification) for the background.

So this analysis might just be wrong!

Environment

VS Code

Version: 1.91.0 (system setup) Commit: ea1445cc7016315d0f5728f8e8b12a45dc0a7286 Date: 2024-07-01T18:52:22.949Z Electron: 29.4.0 ElectronBuildId: 9728852 Chromium: 122.0.6261.156 Node.js: 20.9.0 V8: 12.2.281.27-electron.0 OS: Windows_NT x64 10.0.17763

Extensions

Literate 0.14.4 Markdown All in One 3.6.2 Markdown PDF 1.5.0 Markdown Language Features 1.0.0 EditorConfig for VS Code 0.16.4 Extension Authoring 1.0.0 Markdown Math 1.0.0 (vscode.markdown-math) Markdown Math 0.1.0 (koehlma.markdown-math) Mardown AutoTOC 0.3.0 and many others that seem unlikely to be relevant

[RossBoylan]

The markdown-pdf extension might be contributing to the color. It has

pre code {
    color: var(--vscode-editor-foreground);
    tab-size: 4;
}

in markdown.css.

I suspect my remarks about color = #d4d4d4 being red are a red herring. They are based on the fact that that interactive color picker shows red, but since the color is completely neutral the choice of the saturated color is probably arbitrary.

[RossBoylan]

This is a report on a couple of changes that didn't work, one that worked temporarily, and others that I think would work but are undesirable.

I modified C:\Users\rdboylan\.vscode\extensions\jesterking.literate-0.14.4\literate\style.css by adding a pre code specification. It didn't change anything. On the theory this was being superseded by Programs/Microsoft VS Code/resources/app/extensions/markdown-language-features/media/markdown.css (identified in WebView as the source of the style element, I tried adding !important to style.css:

pre code {
    margin-top: 0em;
    color: black !important;
}

This also made no difference, even after restarting VSCode.

Directly editing the color in WebView does make a difference, but is not persistent. I mentioned that in the original report.

I think that editing the markdown.css file above (which, despite my earlier guess, seems to be from core VSCode, not the Markdown PDF extension) or the theme definition would also work, but that is more global that I would like. In particular, since I have a dark theme, setting the color to black will make it invisible in other contexts.

[jesterKing]

Thank you for the report. I was away on vacation for a month, so it took a while to go through all the correspondence.

This is indeed a weak point currently. I need to add code that identifies whether a style.css is provided or not. In the case there isn't the extension should add a stylesheet that gives usable results.

If I can find out how to determine whether a dark theme or light theme is in use I could probably add a "matching" theme, although I'll probably work from the assumption it is going to be light based.

[RossBoylan]

I found an extension, github markdown preview style, that generates different styling for the preview depending on whether the baseline style is dark or light. Even after looking at it, I'm not sure how it does it, but I think the function generateStyles() is important.

I think the code is dynamically generating an appropriate style file.

The dynamic style choice only occurs for certain user configuration options of markdown-preview-github-styles.colorTheme: Auto means the choice depends on the theme for VSCode while System means the dependency is on the OS theme.

I also looked around for ways to apply the style only to some content. I found a bunch of stuff like this request that has been around for 7 years and generated lots of interest but apparently no solution. Note that one is not specific to preview styles.