Open RossBoylan opened 2 months ago
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.
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.
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.
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.
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 OneViewing the generated
.html
file withFireFox
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 nostyle.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 fromhtml
inmarkdown.css
fromResources/app/extensions/markdown-language-features/media
. If I interactively edit the activecolor
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 thestyle.css
in theliterate
extension.There are several anomalies:
hljs-keyword
.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