Style Markdown with CSS in VSCode

hustnzj 的个人博客 / 5 / 0 / 创建于 1年前 / 更新于 1年前

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 
}

Style Markdown with CSS in VSCode

Using Local file

Using URLs

The effect of using custom css

Before

After

Further Reading

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

Style Markdown with CSS in VSCode

Using Local file

Using URLs

The effect of using custom css

Before

After

Further Reading

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录