CODEWITHSUNDEEP
cssvisual-studio-codemarkdown
Halcyon
Halcyon

Reputation: 14971

Where are the built-in Markdown CSS files in Visual Studio Code?

Visual Studio Code has a built-in Markdown previewer. A theme can be selected in the preview window by right-clicking and choosing Preview Theme and selecting from various CSS options such as github-light.css, none.css, etc.

I would like to use some of these CSS files as a starting point for my own Markdown preview CSS. Where are these CSS files located and how may one access them?

Upvotes: 8

Views: 4717

Answers (1)

Timothy G.
Timothy G.

Reputation: 9027

On my Windows machine, it looks like the CSS file that controls the styling is in C:\Program Files\Microsoft VS Code\resources\app\extensions\markdown-language-features\media. The file is called markdown.css. Sure enough, when I change some of the values around, I see the preview window (after closing and reopening it, or switching tabs) update with the specified changes.

Within this file are multiple "Theming" classes, which I suspect are what get referenced when you switch themes, rather than having multiple .css files per theme:

/** Theming */

.vscode-light pre {
    background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre {
    background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre {
    background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
    border-color: rgb(0, 0, 0);
}

.vscode-light th {
    border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark th {
    border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light td {
    border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark td {
    border-color: rgba(255, 255, 255, 0.18);
}

Upvotes: 7

Related Questions