MarkDown Preview Enhanced自定义样式配置-Vscode插件配置

呆呆的猪胖胖 Lv4
  2025-03-16 19:15 2025-03-16 19:15 Created   2025-05-13 15:34:43 2025-05-13 15:34:43 Updated    

前言

Vscode中有许多非常好用的插件，能够提升程序员的写作效率。其中Markdown prview enhanced作为一款markdown写作的预览插件，还是非常的有必要的。该软件可以实现自定义markdown的样式，今天分享一下配置技巧。

Markdown基础语法

下载安装

Vscode搜索Markdown Preview Enhanced，安装下载即可。

使用

自定义样式的使用需要打开命令窗口，按ctrl+shift+p后键入markdown找到自定义样式部分：

点击该命令后，系统会自动在工作区创建一个名为.crossnote的文件夹。

注：其中的Style文件夹是笔者自己创建的，并非自己产生的，需要注意。

配置说明

在该目录下的style.less文件中修改就可以更改markdown文件的预览和导出样式，但是需要注意的是，这样做会使得全局样式的更改变得比较困难，因此笔者更加推荐创建.less文件并使用@import "path to your .less file"或者是<!-- @import "path to your .less file" -->
笔者个人更加推荐第二种写法，因为本质上是一种注释，会在其他编译器下被忽视，所写的markdown文件的泛用性更加的强大。

此外在parser.js处增加一些内容也可以使得markdown预览获得增强效果，详细的配置方法见下列笔者配置。

笔者配置

parser.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
({
  // Please visit the URL below for more information:
  // https://shd101wyy.github.io/markdown-preview-enhanced/#/extend-parser
  onWillParseMarkdown: async function(markdown) {
    //return markdown;
    // 修改标题,确保字体颜色一定是自己修改的样式
    
    markdown = markdown.replace(/(#+)\s+(.*)/gm, (match, hashes, text) => {
      // 确定标题的等级
      const level = hashes.length;
      return `<h${level}><span class="hh">${text.trim()}</span></h${level}> \n`;
    });
    
    //添加对于!text!的支持使得text内的内容变为红色粗体
    markdown = markdown.replace(/!(.+?)!/g, (_, content) =>`<span class="bred">${content}</span>`);
    //添加对于@text@的支持使得text内的内容变为橙色粗体
    markdown = markdown.replace(/@(.+?)@/g, (_, content) =>`<span class="borange">${content}</span>`);
    //添加对于#text#的支持使得text内的内容变为黄色粗体
    markdown = markdown.replace(/；(.+?)；/g, (_, content) =>`<span class="byellow">${content}</span>`);
    //添加对于￥text￥的支持使得text内的内容变为绿色粗体
    markdown = markdown.replace(/￥(.+?)￥/g, (_, content) =>`<span class="bgreen">${content}</span>`);
    //添加对于%text%的支持使得text内的内容变为青色粗体
    markdown = markdown.replace(/%(.+?)%/g, (_, content) =>`<span class="bcyan">${content}</span>`);
    //添加对于?text?的支持使得text内的内容变为蓝色粗体
    markdown = markdown.replace(/\?(.+?)\?/g, (_, content) =>`<span class="bblue">${content}</span>`);
    //添加对于&text&的支持使得text内的内容变为紫色粗体
    markdown = markdown.replace(/&(.+?)&/g, (_, content) =>`<span class="bpurple">${content}</span>`);
    return markdown;
  },

  onDidParseMarkdown: async function(html) {
    return html;
  },

})

以上的修改增加了一些对于markdown的一些样式的支持，在不添加这些语法进入的时候，并不会出现改变。实现的效果见下文。

标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
.hh{
  color: #fffcfc;
}

/* 一级标题 */
h1 {
    margin: 10px auto;
    height: 35px;
    background-color: rgb(0, 0, 0);
    border-bottom: 1px solid rgb(25, 24, 24);
    //overflow: hidden;
    //box-sizing: border-box;
    color: #f0f0f0;
  }
  
  /* 二级标题内容 */
  h1 .content {
    margin-top: -1px;
    margin-left: -10px;
    //display: inline-block;
    width: auto;
    height: 40px;
    background-color: rgb(0, 0, 0);
    border-bottom-right-radius:100px;
    padding-right: 30px;
    padding-left: 30px;
  }
  
  h1:after {
    display: inline-block;
    content: " ";
    vertical-align: bottom;
    border-top: 40px solid #6d6968;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
  }
    
  /* 二级标题 */
  h2 {
    margin: 10px auto;
    height: 33px;
    background-color: rgb(0, 0, 0);
    border-bottom: 1px solid rgb(25, 24, 24);
    overflow: hidden;
    box-sizing: border-box;
    color: #f0f0f0;
  }
    
  /* 二级标题内容 */
  h2 .content {
    margin-left: -10px;
    display: inline-block;
    width: auto;
    height: 40px;
    background-color: rgb(0, 0, 0);
    border-bottom-right-radius:100px;
    padding-right: 30px;
    padding-left: 30px;
    line-height: 40px;
    font-size: 16px;
  }
  
  h2:after {
    display: inline-block;
    content: " ";
    vertical-align: bottom;
    border-top: 30px solid #6d6968;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
  }
  
  /* 三级标题 */
  h3 {
    margin: 20px auto 5px;
    border-top: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    color: #f0f0f0;
    background-color: rgb(0, 0, 0);
    border-bottom: 1px solid rgb(25, 24, 24);
  }
  
  /* 三级标题内容 */
  h3 .content {
    margin-top: -1px;
    padding-top: 6px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 17px;
    border-top: 2px solid rgb(33, 33, 34);
    display: inline-block;
    line-height: 1.1;
  }
  
  h3:after {
    display: inline-block;
    content: " ";
    vertical-align: bottom;
    border-top: 24px solid #6d6968;
    border-right: 24px solid transparent;
    border-left: 24px solid transparent;
  }
  
  
  h4 {
    margin: 10px auto -1px;
    border-top: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    color: #f0f0f0;
    background-color: rgb(0, 0, 0);
    border-bottom: 1px solid rgb(25, 24, 24);
  }
  
  h4 .content {
    margin-top: -1px;
    padding-top: 6px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 16px;
    border-top: 2px solid rgb(33, 33, 34);
    display: inline-block;
    line-height: 1.1;
  }
  
  h4:after {
    display: inline-block;
    content: " ";
    vertical-align: bottom;
    border-top: 18px solid #6d6968;
    border-right: 18px solid transparent;
    border-left: 18px solid transparent;
  }
  
  h5 {
    margin: 10px auto -1px;
    border-top: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    color: #f0f0f0;
    background-color: rgb(0, 0, 0);
    border-bottom: 1px solid rgb(25, 24, 24);
  }
  
  h5 .content {
    margin-top: -1px;
    padding-top: 6px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 16px;
    border-top: 2px solid rgb(33, 33, 34);
    display: inline-block;
    line-height: 1.1;
  }
  
  h5:after {
    display: inline-block;
    content: " ";
    vertical-align: bottom;
    border-top: 15px solid #6d6968;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }

标题配置之后的效果如下：

这一部分的源码是：

1
2
3
4
5
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题

也就是将标题控制为黑底白字。

自定义彩色粗体

这里使用了一些新的markdown语法,也就是我们在parser.js新增的部分的支持，需要配合使用，否则不会生效。配置内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*自定义样式，红色粗体blue*/
.bred {
    color: #c21515;
    font-weight: bold;
}

/*自定义样式，橙色粗体blue*/
.borange {
    color: #c27a15;
    font-weight: bold;
}

/*自定义样式，黄色粗体blue*/
.byellow {
    color: #c2bf15;
    font-weight: bold;
}

/*自定义样式，黄色粗体blue*/
.bgreen {
    color: #29c215;
    font-weight: bold;
}
  
/*自定义样式，青色粗体blue*/
.bcyan {
    color: #15c2b9;
    font-weight: bold;
}

/*自定义样式，蓝色粗体blue*/
.bblue {
    color: #152fc2;
    font-weight: bold;
}

/*自定义样式，青色粗体blue*/
.bpurple {
    color: #9d15c2;
    font-weight: bold;
}

配置的效果如下所示：

对应的源码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
### 红色粗体
!这是红色粗体!
### 橙色粗体
@这是橙色粗体@
### 黄色粗体
=这是黄色粗体=
### 绿色粗体
￥这是绿色粗体￥
### 青色粗体
%这是青色粗体%
### 蓝色粗体
?这是蓝色粗体?
### 紫色粗体
&这是紫色粗体&

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*无序列表*/
li section {
    font-size: 15px;
    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  }
  
  /* 无序列表整体样式
   * list-style-type: square|circle|disc;
   */
ul {
    list-style-type: square;
    color:antiquewhite;
    border-radius: 10px; /* 设置边框圆角 */
    background-color: #1a1a1a; /* 设置背景颜色 */
    padding: 20px; /* 设置内边距 */
    padding-bottom: 5px;
    padding-top: 5px;
    text-indent: 0em;
  }
  
  /* 有序列表整体样式
   * list-style-type: upper-roman|lower-greek|lower-alpha;
   */
ol {
    list-style-type: upper-roman;
    color:antiquewhite;
    border-radius: 10px; /* 设置边框圆角 */
    background-color: #1a1a1a; /* 设置背景颜色 */
    padding: 40px; /* 设置内边距 */
    text-indent: 0em;
}

配置的效果如下所示：

对应的源码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
### 无序列表
* 条目
    - 条目
    - 条目
        - 条目
            - 条目
* 条目
### 有序列表
1. 有序列表 1
2. 有序列表 2
3. 有序列表 3
4. 有序列表 4

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
table{
  color: rgb(0, 0, 0);
  margin: 0 auto;  
  border-collapse: collapse;  /* 适当地合并单元格边框（可选） */
  display: table;  /* 保持为表格类型 */
}

  table tr th {
    border: 1px solid #cecece;
    background-color: #262626;
    color: #f8f8f8;
    border-bottom: 0;
  }
  
  table tr td {
    border: 1px solid #2d2d2d;
  }
  
  body table tr th {
    border: 1px solid #cecece;
    background-color: #262626;
    color: #f8f8f8;
    border-bottom: 0;
  }
  
  body table tr td {
    border: 1px solid #2d2d2d;
  }
  
  body table tr:nth-child(2n) {
    background-color: #686868;
    color: antiquewhite;
    border: 1px solid #a1a1a1;
  }

实现的效果：

对应的源码：

1
2
3
4
5
### 表格
|条目|条目|
|-|-|
|奇数行|奇数行|
|偶数行|偶数行|

引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body blockquote {
    border-left-color: rgb(0, 0, 0);
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-right: 1em;
    padding-left: 1em;
    border-left-width: 4px;
    background-color: rgb(79, 79, 79);
    quotes: none;
  }
  
  /* 引用文字 */
blockquote p {
    font-size: 15px;
    font-family:"DFKai-SB",-apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-style: italic;
    color: rgb(200, 200, 200);
    background-color: rgb(137, 137, 137);
    line-height: 1.25em;
}

实现的效果：

对应的源码：

1
2
### 引用
> 这是引用的文字

后记

总结而言，配置该插件实现自定义的markdown样式还是很酷的，由于为了保证不同情况下的markdown尽可能通用，作者采用了以上配置方式，读者可以自行尝试可行的配置方式及样式。

同系列

Better Comments-Vscode插件配置
MarkDown Preview Enhanced自定义样式配置-Vscode插件配置
自定义Vscode界面

  • Title: MarkDown Preview Enhanced自定义样式配置-Vscode插件配置
  • Author: 呆呆的猪胖胖
  • Created at : 2025-03-16 19:15:00
  • Updated at : 2025-05-13 15:34:43
  • Link: https://blog.cflmy.cn/2025/03/16/Technology/Vscode/MarkDownPrview/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
MarkDown Preview Enhanced自定义样式配置-Vscode插件配置
  1. 前言
  2. 下载安装
  3. 使用
  4. 配置说明
  5. 笔者配置
    1. parser.js
    2. 标题
    3. 自定义彩色粗体
    4. 列表
    5. 表格
    6. 引用
  6. 后记
    1. 同系列