Markdown editor (preview) doesnt use stylesheet like markdown preview
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
Type: Bug
Ideally the feature would allow some form of customizing the colors of headers.
With preview the custom css lets it look more readable like this
This is the settings.json used.
`"markdown.styles": ["/Users/econneely/dotfiles/vscode/markdown-preview.css"],`
style.css
/* Markdown preview — match editor / markdownInlineEditor (see tools/markdown/colors.ts) */
:root {
--markdown-font-family: "Cascadia Code", "Symbols Nerd Font", monospace;
}
body {
color: #abb2bf;
background-color: #282c34;
}
a {
color: #61afef;
}
a:hover {
color: #d7dae0;
}
/* Headings (override built-in preview + theme inheritance) */
body.vscode-dark h1,
body h1 {
color: #d19a66;
border-bottom-color: #3a3f4b;
}
body.vscode-dark h2,
body h2 {
color: #e06c75;
border-bottom-color: #3a3f4b;
}
body.vscode-dark h3,
body h3 {
color: #61afef;
}
body.vscode-dark h4,
body.vscode-dark h5,
body.vscode-dark h6,
body h4,
body h5,
body h6 {
color: #c678dd;
}
blockquote {
color: #5c6370;
border-left-color: #3e4451;
}
li::marker {
color: #abb2bf;
}
/* GFM task list checkboxes */
.contains-task-list {
padding-left: 1.6em;
}
.contains-task-list .task-list-item {
list-style-type: none;
}
.contains-task-list .task-list-item input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
width: 1em;
height: 1em;
margin: 0 0.4em 0 -1.6em;
vertical-align: middle;
border: 1px solid #636e83;
border-radius: 2px;
background: transparent;
cursor: default;
}
.contains-task-list .task-list-item input[type="checkbox"]:checked {
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d7dae0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 L6.5 11.5 L12.5 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.72em;
}
li > input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
width: 1em;
height: 1em;
margin-right: 0.4em;
vertical-align: middle;
border: 1px solid #636e83;
border-radius: 2px;
background: transparent;
}
li > input[type="checkbox"]:checked {
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d7dae0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 L6.5 11.5 L12.5 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.72em;
}
:not(pre) > code {
color: #c678dd;
background-color: #21252ba0;
border-radius: 3px;
padding: 0.1em 0.35em;
}
strong {
color: #abb2bf;
font-weight: 700;
}
em,
del {
color: #abb2bf;
}
hr,
th,
td {
border-color: #3a3f4b;
}
th {
color: #abb2bf;
}
/* Fenced code blocks — One Dark / editor token colors (overrides highlight.css) */
pre {
background-color: #23282f;
border-color: #3a3f4b;
}
pre code.hljs {
color: #abb2bf;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-keyword,
.hljs-literal,
.hljs-type,
.hljs-built_in {
color: #56b6c2;
}
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
color: #98c379;
}
.hljs-number {
color: #d19a66;
}
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-title,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-section,
.hljs-tag {
color: #e06c75;
}
.hljs-symbol,
.hljs-link {
color: #61afef;
}
.hljs-function,
.hljs-subst,
.hljs-params,
.hljs-meta,
.hljs-meta-keyword,
.hljs-operator,
.hljs-punctuation {
color: #abb2bf;
}
.hljs-regexp,
.hljs-deletion {
color: #e06c75;
}
.hljs-emphasis {
font-style: italic;
color: #abb2bf;
}
.hljs-strong {
font-weight: bold;
color: #abb2bf;
}
/* JSON — keys (#E06C75) vs values (#98C379); do not paint all strings green */
code.language-json .hljs-attr {
color: #e06c75;
}
code.language-json .hljs-string {
color: #98c379;
}
code.language-json .hljs-number {
color: #d19a66;
}
code.language-json .hljs-literal {
color: #56b6c2;
}
code.language-json .hljs-punctuation {
color: #abb2bf;
}
code.language-markdown .hljs-strong {
color: #abb2bf;
font-weight: 700;
}
code.language-markdown .hljs-emphasis {
color: #abb2bf;
font-style: italic;
}
code.language-markdown .hljs-code {
color: #c678dd;
}
code.language-markdown .hljs-bullet {
color: #e06c75;
}
code.language-markdown .hljs-link,
code.language-markdown .hljs-symbol {
color: #61afef;
}
code.language-markdown .hljs-string {
color: #98c379;
}
code.language-markdown .hljs-quote {
color: #5c6370;
}
VS Code version: Code 1.131.0 (e4c7e7b1d6d060162f4aa7f8225271b67ce1df75, 2026-07-28T10:51:25Z)
OS version: Linux x64 7.0.0-14-generic
Modes:
System Info
|Item|Value|
|---|---|
|CPUs|12th Gen Intel(R) Core(TM) i5-12600KF (16 x 4500)|
|GPU Status|2d_canvas: enabled
GPU0: VENDOR= 0x8086 [Google Inc. (Intel)], DEVICE=0xe20b [ANGLE (Intel, Mesa Intel(R) Arc(tm) B580 Graphics (BMG G21), OpenGL ES 3.2 Mesa 26.1.5 - kisak-mesa PPA)], DRIVER_VENDOR=Mesa, DRIVER_VERSION=26.1.5 *ACTIVE*
Machine model name:
Machine model version:
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
trees_in_viz: disabled_off
video_decode: enabled
video_encode: disabled_software
vulkan: enabled_on
webgl: enabled
webgpu: enabled
webgpu_on_vk_via_gl_interop: enabled
webnn: disabled_off|
|Load (avg)|1, 1, 1|
|Memory (System)|31.13GB (19.97GB free)|
|Process Argv|./dotfiles --crash-reporter-id 14416293-186e-4d6f-a8dc-ef8644a5a511|
|Screen Reader|yes|
|VM|0%|
|DESKTOP_SESSION|cinnamon-wayland|
|XDG_CURRENT_DESKTOP|X-Cinnamon|
|XDG_SESSION_DESKTOP|undefined|
|XDG_SESSION_TYPE|wayland|
Extensions (39)
Name|Identifier|Author|Version
---|---|---|---
Git Stash|arturock.gitstash|arturock|6.13.0
Fish|bmalehorn.vscode-fish|bmalehorn|1.0.49
Mermaid Markdown Syntax Highlighting|bpruitt-goddard.mermaid-markdown-syntax-highlighting|bpruitt-goddard|1.8.1
Multiple cursor case preserve|cardinal90.multi-cursor-case-preserve|Cardinal90|1.0.5
CSS Modules|clinyong.vscode-css-modules|clinyong|0.5.4
Markdown Inline Editor|codesmith.markdown-inline-editor-vscode|CodeSmith|1.24.2
ESLint|dbaeumer.vscode-eslint|dbaeumer|3.0.34
EditorConfig|editorconfig.editorconfig|EditorConfig|0.18.2
Prettier - Code formatter|esbenp.prettier-vscode|esbenp|12.4.0
GitHub Actions|github.vscode-github-actions|github|0.32.3
Go|golang.go|golang|0.56.0
C# Utilities|irishbruse.csharp-utilities|irishbruse|0.4.3
IrishBruse's Utilities|irishbruse.ib-utilities|irishbruse|0.16.0
CloudFormation Linter|kddejong.vscode-cfn-lint|kddejong|0.27.0
Mac CA VSCode|linhmtran168.mac-ca-vscode|linhmtran168|0.1.1
LLDB DAP|llvm-vs-code-extensions.lldb-dap|llvm-vs-code-extensions|0.4.1
C#|ms-dotnettools.csharp|ms-dotnettools|2.140.9
.NET Install Tool|ms-dotnettools.vscode-dotnet-runtime|ms-dotnettools|3.1.0
Python Debugger|ms-python.debugpy|ms-python|2026.6.0
Python|ms-python.python|ms-python|2026.4.0
Pylance|ms-python.vscode-pylance|ms-python|2026.3.1
Python Environments|ms-python.vscode-python-envs|ms-python|1.36.0
C/C++|ms-vscode.cpptools|ms-vscode|1.32.2
Hex Editor|ms-vscode.hexeditor|ms-vscode|1.11.1
Flame Chart Visualizer for JavaScript Profiles|ms-vscode.vscode-js-profile-flame|ms-vscode|1.0.11
Jest|orta.vscode-jest|Orta|6.4.4
Material Icon Theme|pkief.material-icon-theme|PKief|5.37.0
Material Product Icons|pkief.material-product-icons|PKief|1.7.1
Paste JSON as Code|quicktype.quicktype|quicktype|23.0.170
XML|redhat.vscode-xml|redhat|0.29.3
YAML|redhat.vscode-yaml|redhat|1.24.0
just|skellock.just|skellock|2.0.0
Lua|sumneko.lua|sumneko|3.18.2
Even Better TOML|tamasfe.even-better-toml|tamasfe|0.21.2
MDX|unifiedjs.vscode-mdx|unifiedjs|1.8.17
Error Lens|usernamehw.errorlens|usernamehw|3.28.0
TODO Highlight|wayou.vscode-todo-highlight|wayou|1.0.5
Pretty TypeScript Errors|yoavbls.pretty-ts-errors|YoavBls|0.8.7
Markdown All in One|yzhang.markdown-all-in-one|yzhang|3.6.3
Contributor guide
Assessment
This issue has not been assessed yet.