Visual Studio Code Markdown 预览样式

Question

I know how to use markdown-styles in settings to supply my own CSS for styling Markdown previews, but I don't know what elements and CSS classes to style. Are the ones used in Markdown preview documented somewhere?

Answer 1

1. Open a Markdown file.
2. Open the split preview window ( Cmd + K , V on Mac, or the split view icon in the upper right-hand corner of the window, or open the command palette (menu View → Command Palette or Shift + Cmd + P on Mac) and run Markdown: open Preview to the side .
3. Open the command palette and run Developer: Open WEBVIEW developer tools .
4. That will open a browser-like inspector, and you can drill down and see whatever you need there.

Note that Toggle Developer Tools in the Help menu does not work for this — it does not drill down into the Preview's webview window.

Answer 2

From the documentation :

Working with Markdown files in Visual Studio Code is simple, straightforward, and fun. Besides Visual Studio Code's basic editing, there are a number of Markdown specific features that will help you be more productive.

Go through that documentation .

Answer 3

You can use vr8ce ’s helpful answer to find the source of the default stylesheet. On the Mac, this is the path:

/Applications/Visual\\ Studio\\ Code.app/Contents/Resources/app/extensions/markdown-language-features/media/markdown.css