Style Markdown with CSS in VSCode

VS Code supports Markdown files out of the box. But the default preview is not perfect to me anyway. For example, the rendered image always go across the whole width of the viewport.

Fortunately, we can use our own css in the Markdown preview with the "markdown.styles": [] setting. This lists URLs for style sheets to load in the Markdown preview. These stylesheets can either be https URLs, or relative paths to local files in the current workspace.

For instance, we want to use a custom CSS to change the default font for the page, the color for the H1 header and the width for the image. Here is the relevant CSS named Style.css:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  color: gold;
}

img {
  width: 90%;
  margin: 0 auto;
  display: block;
}

@media screen and (min-width: 700px) {
  img {
    width:500px;
  }
}

Using Local file

Then we can put this stylesheet at the root of your current workspace or directory and update the user settings.json file:

{
  "markdown.styles": ["Style.css"], // local
}

Using URLs

We can use jsdelivr + ‘github’ to host the css file. Using the generated cdn URL to update the user settings.json file:

{
  // "markdown.styles": ["Style.css"], // local
  "markdown.styles": ["https://cdn.jsdelivr.net/gh/<github-username>/<repo>@<version>/<file>"], // URL 
}

The effect of using custom css

Before

Style Markdown with CSS in VSCode

After

Style Markdown with CSS in VSCode

Further Reading

How to host static file?

本作品采用《CC 协议》,转载必须注明作者和本文链接
日拱一卒
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
88
粉丝
82
喜欢
148
收藏
120
排名:66
访问:11.4 万
私信
所有博文
社区赞助商