VsCode更换MarkDown样式到底能有多好看？
不能自动预览时可以信任所有区域
vs code到底有多强大？
先看看MarkDown笔记的预览效果
这只是一种插件
谁再让我用别的软件写代码
我就把这篇文章扔过去
如何操作？
1、安装插件：在扩展中搜索Markdown All in One
软件2：Markdown Preview Enhance
2、点击【扩展设置】
3、点击【查看】—【命令面板】
4、在搜索框中输入markdown-preview-enhanced.customizeCss，markdown的样式代码就出来了。然后进行样式的美化~
5、Ctrl+K V查看预览结果，是不是发现预览的效果和你正在看的文章样式一模一样呢？关注公众號【小知识酷】，查看更多vscode功能。
6、文本强调效果Markdown All in One
| 快捷键 | MD | 样式 | html语法 | 效果 |
|---|---|---|---|---|
| Alt+S | ~~小知识酷~~ |
黑色字体+蓝色虚下划线 | s |
|
| ctrl+I | *小知识酷* |
黑体文字+蓝色实下划线 | em斜体 |
小知识酷 |
| ctrl+B | **小知识酷** |
橙色文字 | strong加粗 |
2 |
***小知识酷*** |
橙色文字+蓝色实下划线 | <strong><em> |
小知识酷 | |
2^10^ |
文字上标 | |||
H~2~O |
文字下标 | sub下标 |
H2O | |
| 选中文字后按``` | `` |
单个代码 | code |
7、vs code代码样式
/*
名称：Vscode MarkdownStyle
介绍：vscode markdown皮肤代码样式
发布时间：2023年10月21日21:02:55
更新时间：2025年10月28日21:34:00
保存地址：www.cnblogs.com/MrFlySand/p/16955769.html
*/
* {
font-size: 20px !important;
font-family: SimHei;
/* line-height: 1.8;*/
line-height: 1.6; /*“小字版”行间距*/
word-break: break-all;
font-family: Source Han Sans !important;
letter-spacing: 2px;
color: #222222;
text-align: justify;
/* 所有行两端对齐*/
text-justify: inter-ideograph;
/*最后一行居左对齐*/
}
.markdown-preview {
background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;
height: auto;
column-count:4; /*分栏3列60%，2栏80%，3栏75%最适合背诵和练习*/
// 小抄版：4栏50%，可以再适当调整行间距，边距“无”，3栏55%最适合小抄
column-gap: 20px; /*栏间距*/
column-rule: 1px solid #ccc;
padding: 10px !important;
}
p{
/* text-indent: 2em; //首行缩进*/
line-height: 1.6em !important; /*行间距*/
margin: 0.3em 0 !important; /*段落间距*/
}
b{
font-weight: bold !important;
color: #c20000 !important;
}
strong {
font-weight: bold !important;
/* 样式1（推文教程）：橙色加粗*/
/*color: #ff4c00;*/
/* 样式2（PDF资料）：黑色*/
color: #000000 !important;
// color: #cc0000 !important;
//background-color: #ffef76; /*黄色背景*/
}
.markdown-preview em{
font-style: normal;
border-bottom: 2px dashed #000; /*虚线黑色*/
/* 样式1（推文教程）：绿色黑体下划线*/
/* color: #2b2b2b;*/
/* font-weight: 800;*/
/* 样式2（PDF资料）：红底红体*/
// color: #ff7766;
// background-color: #fff0f0;
/*样式3：紫色、紫底*/
// color: #AA66FF;
// background-color: #FFEEFF;
// 样式4：蓝色
// color: #2e7acb;
// background-color: #f0f5ff;
background-color: #ffeeee;
}
s {
text-decoration: none;/*清除文本样式，没有下划线 */
border-bottom: 2px solid #000; /*下划线：实线*/
/* 黑体绿色波浪下划线*/
/* text-decoration: #42B983 wavy underline;*/
/*下划线与基线的距离*/
/* text-underline-offset: 6px;
/*下划线的粗细*/
/*text-decoration-thickness: 1.2px;
/*样式2（PDF资料）：紫底紫体色*/
// color: #AA66FF;
// background-color: #FFEEFF;
background-color: #ffeeff;/*黑体字使用*/
}
/* 重点<span class="zhongKuoHao">【选/填/简】</span>的样式，输入法：span6*/
.zhongKuoHao{
font-weight: 600;
color: #cc0000;
background-color: #ffee66;
}
p {
font-size: 15px;
}
.markdown-preview a{
color: #409eff !important;
font-weight: 700 !important;
}
/* 一级标题 */
.markdown-preview h1 {
color: #000 !important;
display: table;
margin: 20px auto 10px auto !important;
padding: 5px 10px !important;
background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
border-width: 1px;
border-radius: 10px;
font-size: 1em !important;
text-align: center;
}
.markdown-preview h2 {
display: table;
margin: 10px auto 10px auto !important;
padding: 0px 5px !important;
border-bottom: 5px solid #205792;
text-align: center;
font-size: 1em !important;
}
/* 三级标题 */
.markdown-preview h3 {
font-size: 1em !important;
border-left: 5px solid #03a9f4;
padding: 0px 5px !important;
font-weight: bold;
border-bottom: none !important;
margin: 10px 0px !important;
color: #000 !important;
}
.markdown-preview h4 {
color: #000;
border-bottom: #2b2b2b;
font-size: 1em;
margin: 10px 0px !important;
}
.markdown-preview h4:before {
content: "✒️ ";
}
.markdown-preview h5{
margin: 10px 0px !important;
}
.markdown-preview h5:before {
content: "✏️ ";
}
.markdown-preview h6 {
background-color: #f1f1f1;
color: #000;
border-left: 5px solid #fff;
padding-left: 5px !important;
box-shadow: -3px 0px #205792;
margin: 10px 0px !important;
}
img {
/* width: 95% !important;*/
margin: 10px auto 10px auto !important;
/* box-shadow: 0px 0px 5px #ccc;*/
border: 1px solid #ccc;
max-width: 90% !important;
display: block;
}
sup,
sub {
font-size: 0.6em;
}
table td {
// 文字不换行
white-space: nowrap;
// 文字不换行
white-space: pre-line;
}
table {
/* border: 1px solid #dedede;*/
/*表格外边框设置*/
margin: 15px auto;
/*外边距*/
border-collapse: collapse;
/*使用单一线条的边框*/
empty-cells: show;
/*单元格无内容依旧绘制边框*/
white-space: nowrap;
/*表头内容强制在一行显示*/
}
table th {
white-space: nowrap;
/*表头内容强制在一行显示*/
font-weight: bold;
/*加粗*/
text-align: center !important;
/*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
background: #6aa2ff !important;
color: #fff !important;
}
table tbody tr {
background-color: #ffffff;
}
table tbody tr:nth-child(2n) {
background-color: #f6f8fa !important;
border-top: 1px solid #c6cbd1 !important;
}
table tr:hover {
background: #efefef;
}
dl {
background: #eff5f0;
padding: 0 5px !important;
border-radius: 10px;
}
dl>dt {
font-style: normal !important;
font-weight: 900 !important;
padding: 5px !important;
border-bottom: 1px solid #ddd;
}
dl>dd {
padding: 5px !important;
margin: 0;
}
dl#dlBackground1{
background: #faeff4;
}
dl#dlBackground2{
background: #fce8e1d4;
}
dl#dlBackground3{
background: #def2ff;
}
/*引用样式*/
blockquote {
border: solid #ff7766 2px !important;
background: #fff9f9 !important;
text-indent: 1.8em;
/*首行缩进*/
margin: 0;
color: #2b2b2b !important;
border-left: none;
position: relative;
margin: 0 !important;
padding-left: 0px !important;
padding: 10px !important;
}
blockquote p {
margin: 0 !important;
font-weight: 400 !important;
padding: 0 !important;
}
/* 图注*/
p.p01 {
text-align: center;
color: #a0a0a0 !important;
font-size: 0.8em !important;
line-height: 0;
display: block;
margin: 0px 0px 20px 0 !important;
}
/*有序列表*/
ol{
margin: 0 !important;
padding-left: 0px !important; /*序号和段落文字换行对齐*/
}
.markdown-preview ol ol{
list-style: upper-alpha;
}
.markdown-preview ol ol ol ol{
list-style: initial;
}
.markdown-preview ol ol ol ol ol{
list-style: circle;
}
ol li {
/* 方案1：有序列表的文字换行与文字对齐，不与序号对齐*/
/* list-style-position: outside !important; */
/* margin-left: 25px !important;*/
/*方案2：有序列表的文字换行与序号对齐*/
list-style-position: inside !important;
padding-left: 0px !important;
}
.katex-display {
display: contents !important;
}
span.katex-html {
display: contents !important;
}
.katex-display>.katex{
display: contents !important;
}
/* 结构图*/
rect.basic.label-container {
fill: #fff !important;
}
/* 数学公式*/
span.mord.mtight{
font-size: 1em;
}
// 推文内容
section {
display: contents;
}
// 代码样式
html body code{
border-radius: 3px;
padding: 0 5px !IMPORTANT;
}
pre {
padding: 0 5px !important;
}
code {
padding: 5px 5px !important;
}
MarkDown自动在另一栏显示预览(实时显示)
- vscode取消自动预览markdown preview预览：转到“文件”->“首选项”->“设置”（或按
ctrl+,），搜索以下内容并将其禁用：Auto Show Preview To Side
Ctrl+K V打开markdown预览效果
在MarkDown中创建目录
- 在vs code中按
ctrl+shift+p，然后输入“创建目录” - 绑定快捷键
ctrl+shift+alt+c(contents)
快捷方式
- 输入法快捷输入
codl
<dl id="dlBackground1">
<dt alt="标题→"></dt>
<dd alt="内容↓">
</dd>
</dl>
mdnice代码样式
/*
名称：mdnice样式代码
链接：https:www.cnblogs.com/MrFlySand/p/16955769.html
发表日期：2023年6月3日18:09:59
更新日期：2025年4月14日22:56:19
*/
#nice * {
font-family: SimHei !important;
word-break: break-all !important;
text-align: justify !important;
text-justify: inter-ideograph !important;
font-size: 14.5px !important;
letter-spacing: 2px !important;
line-height: 1.6 !important;
}
#nice {
background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 10px 10px;
background-position: center center;
padding: 0px !important;
line-height: 1.6 !important;
}
p.p01 {
text-align: center;
color: #a0a0a0 !important;
font-size: 12px !important;
}
/* 一级标题 */
#nice h1 .content {
font-size: 1.2em !important;
color: #000 !important;
display: table;
margin: 20px auto 10px auto !important;
padding: 5px 10px !important;
background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
border-width: 1px;
border-radius: 10px;
text-align: center !important;
box-shadow: none !important;
}
#nice h2 .content {
font-size: 1.2em !important;
display: table;
margin: 30px auto 20px auto !important;
padding: 0px 10px !important;
border-bottom: 5px solid #205792;
text-align: center;
}
#nice h3 .content {
font-size: 1.2em !important;
border-left: 8px solid #03a9f4;
padding: 4px 10px !important;
font-weight: bold;
border-bottom: none !important;
}
#nice h4 {
border-bottom: #2b2b2b;
}
#nice h4:before {
content: "✒️ ";
}
#nice h5:before {
content: "✏️ ";
}
#nice h6 {
background-color: #f1f1f1;
border-left: 5px solid #fff;
padding: 0 5px 0 5px !important;
box-shadow: -3px 0px #205792;
}
#nice em {
font-style: normal;
border-bottom: 1.6px dashed;
color: #ff7766 !important;
background-color: #fff0f0 !important;
}
#nice s {
font-style: normal;
/*清除文本样式，没有下划线 */
text-decoration: none !important;
/*下划线：实线*/
border-bottom: 1.6px solid;
/* 颜色：紫色紫底 */
color: #AA66FF !important;
background-color: #FFEEFF !important;
}
s {
color: #AA66FF !important;
background-color: #FFEEFF !important;
}
b,
strong {
font-style: normal;
font-weight: bolder;
color: #000 !important;
}
/* 重点<span class="zhongKuoHao">【选/填/简】</span>的样式，输入法：span6*/
.zhongKuoHao {
color: #cb2e2e;
font-weight: 600;
background-color: #ffee52;
}
sup,
sub {
font-size: 0.6em;
}
img {
width: 95%;
margin: 5px auto 8px auto !important;
border-radius: 3px;
box-shadow: 0px 0px 5px #ccc;
border: 1px solid #ccc;
}
table td {
white-space: nowrap;
}
table {
border: 1px solid #dedede;
/*表格外边框设置*/
margin: 1em auto;
/*外边距*/
border-collapse: collapse;
/*使用单一线条的边框*/
empty-cells: show;
/*单元格无内容依旧绘制边框*/
white-space: nowrap;
/*表头内容强制在一行显示*/
}
table th {
white-space: nowrap;
/*表头内容强制在一行显示*/
font-weight: bold;
/*加粗*/
text-align: center !important;
/*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
background: #6aa2ff !important;
color: #fff;
}
table tbody tr:nth-child(2n) {
background-color: #f6f8fa !important;
border-top: 1px solid #c6cbd1 !important;
}
table tr:hover {
background: #efefef;
}
/*引用*/
#nice .multiquote-1 {
border-left: solid #ef7060 4px !important;
background: #fff9f9 !important;
text-indent: 1.8em;
/*首行缩进*/
margin: 0;
color: #2b2b2b !important;
border-left: none;
position: relative;
margin: 0 !important;
padding-left: 0px !important;
padding: 10px !important;
}
blockquote p {
margin: 0 !important;
font-weight: 400 !important;
padding: 0 !important;
}
#nice ol {
list-style: decimal;
padding-left: 0px !important;
}
#nice ol li {
list-style-position: outside;
list-style-position: inside !important;
padding-left: 0px !important;
}
#nice ol li section {
color: rgb(1, 1, 1);
font-size: 14.5px !important;
letter-spacing: 0em !important;
word-break: break-all !important;
text-align: justify !important;
text-justify: inter-ideograph !important;
display: contents;
line-height: 1.6 !important;
}
微信公众号网页F12直接修改html文本属性：text-align: left;margin-bottom: 0px;word-break: break-all;text-align:justify; text-justify:inter-ideograph;
style.less的版本记录
浙公网安备 33010602011771号