vscode 修改默认 Markdown 预览样式

如何修改 vs code 默认的 Markdown 预览样式

vs code 预览 Markdown 文件的快捷键为 Ctrl + Shift + V.

其实在 vs code 中有默认的 Markdown 样式, 但是不一定是我们喜欢的.

/* 要在 Markdown 预览中使用的 CSS 样式表的 URL 或本地路径列表。相对路径被解释为相对于资源管理器中打开的文件夹。如果没有任何打开的文件夹，则会被解释为相对于 Markdown 文件的位置。所有的 "\" 需写为 "\\"。*/"markdown.styles": [],

我们可以这样引用本地 css 文件

"markdown.styles": [ "file:///D:/Microsoft VS Code/vscode_markdown.css" ]

也可以引用第三方文件

"markdown.styles": [ "https://jasonm23.github.io/markdown-css-themes/foghorn.css" ]

比如, 我在 Google 搜索 vscode markdown css, 返回的结果如下

点进去看看那个是自己喜欢的, 把它复制到你本地的 vscode_markdown.css文件中, 你还可以继续按自己的想法修改.
我用的是下面的配置, 感觉还不错.

/*** author: https://github.com/raycon/vscode-markdown-css*/body {    -ms-text-size-adjust: 100%;    -webkit-text-size-adjust: 100%;    line-height: 1.5;    color: #333;    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";    font-size: 16px;    line-height: 1.5;    word-wrap: break-word;}.pl-c {    color: #969896;}.pl-c1,.pl-s .pl-v {    color: #0086b3;}.pl-e,.pl-en {    color: #795da3;}.pl-smi,.pl-s .pl-s1 {    color: #333;}.pl-ent {    color: #63a35c;}.pl-k {    color: #a71d5d;}.pl-s,.pl-pds,.pl-s .pl-pse .pl-s1,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sre,.pl-sr .pl-sra {    color: #183691;}.pl-v {    color: #ed6a43;}.pl-id {    color: #b52a1d;}.pl-ii {    color: #f8f8f8;    background-color: #b52a1d;}.pl-sr .pl-cce {    font-weight: bold;    color: #63a35c;}.pl-ml {    color: #693a17;}.pl-mh,.pl-mh .pl-en,.pl-ms {    font-weight: bold;    color: #1d3e81;}.pl-mq {    color: #008080;}.pl-mi {    font-style: italic;    color: #333;}.pl-mb {    font-weight: bold;    color: #333;}.pl-md {    color: #bd2c00;    background-color: #ffecec;}.pl-mi1 {    color: #55a532;    background-color: #eaffea;}.pl-mdr {    font-weight: bold;    color: #795da3;}.pl-mo {    color: #1d3e81;}.octicon {    display: inline-block;    vertical-align: text-top;    fill: currentColor;}a {    background-color: transparent;    -webkit-text-decoration-skip: objects;}a:active,a:hover {    outline-width: 0;}strong {    font-weight: inherit;}strong {    font-weight: bolder;}h1 {    font-size: 2em;    margin: 0.67em 0;}img {    border-style: none;}svg:not(:root) {    overflow: hidden;}code,kbd,pre {    font-family: monospace, monospace;    font-size: 1em;}hr {    box-sizing: content-box;    height: 0;    overflow: visible;}input {    font: inherit;    margin: 0;}input {    overflow: visible;}[type="checkbox"] {    box-sizing: border-box;    padding: 0;}* {    box-sizing: border-box;}input {    font-family: inherit;    font-size: inherit;    line-height: inherit;}a {    color: #4078c0;    text-decoration: none;}a:hover,a:active {    text-decoration: underline;}strong {    font-weight: 600;}hr {    height: 0;    margin: 15px 0;    overflow: hidden;    background: transparent;    border: 0;    border-bottom: 1px solid #ddd;}hr::before {    display: table;    content: "";}hr::after {    display: table;    clear: both;    content: "";}table {    border-spacing: 0;    border-collapse: collapse;}td,th {    padding: 0;}h1,h2,h3,h4,h5,h6 {    margin-top: 0;    margin-bottom: 0;}h1 {    font-size: 32px;    font-weight: 600;}h2 {    font-size: 24px;    font-weight: 600;}h3 {    font-size: 20px;    font-weight: 600;}h4 {    font-size: 16px;    font-weight: 600;}h5 {    font-size: 14px;    font-weight: 600;}h6 {    font-size: 12px;    font-weight: 600;}p {    margin-top: 0;    margin-bottom: 10px;}blockquote {    margin: 0;}ul,ol {    padding-left: 0;    margin-top: 0;    margin-bottom: 0;}ol ol,ul ol {    list-style-type: lower-roman;}ul ul ol,ul ol ol,ol ul ol,ol ol ol {    list-style-type: lower-alpha;}dd {    margin-left: 0;}code {    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;    font-size: 12px;}pre {    margin-top: 0;    margin-bottom: 0;    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;}.octicon {    vertical-align: text-bottom;}input {    -webkit-font-feature-settings: "liga" 0;    font-feature-settings: "liga" 0;}.markdown-body::before {    display: table;    content: "";}.markdown-body::after {    display: table;    clear: both;    content: "";}.markdown-body>*:first-child {    margin-top: 0 !important;}.markdown-body>*:last-child {    margin-bottom: 0 !important;}a:not([href]) {    color: inherit;    text-decoration: none;}.anchor {    float: left;    padding-right: 4px;    margin-left: -20px;    line-height: 1;}.anchor:focus {    outline: none;}p,blockquote,ul,ol,dl,table,pre {    margin-top: 0;    margin-bottom: 16px;}hr {    height: 0.25em;    padding: 0;    margin: 24px 0;    background-color: #e7e7e7;    border: 0;}blockquote {    padding: 0 1em;    color: #777;    border-left: 0.25em solid #ddd;}blockquote>:first-child {    margin-top: 0;}blockquote>:last-child {    margin-bottom: 0;}kbd {    display: inline-block;    padding: 3px 5px;    font-size: 11px;    line-height: 10px;    color: #555;    vertical-align: middle;    background-color: #fcfcfc;    border: solid 1px #ccc;    border-bottom-color: #bbb;    border-radius: 3px;    box-shadow: inset 0 -1px 0 #bbb;}h1,h2,h3,h4,h5,h6 {    margin-top: 24px;    margin-bottom: 16px;    font-weight: 600;    line-height: 1.25;}h1 .octicon-link,h2 .octicon-link,h3 .octicon-link,h4 .octicon-link,h5 .octicon-link,h6 .octicon-link {    color: #000;    vertical-align: middle;    visibility: hidden;}h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,h5:hover .anchor,h6:hover .anchor {    text-decoration: none;}h1:hover .anchor .octicon-link,h2:hover .anchor .octicon-link,h3:hover .anchor .octicon-link,h4:hover .anchor .octicon-link,h5:hover .anchor .octicon-link,h6:hover .anchor .octicon-link {    visibility: visible;}h1 {    padding-bottom: 0.3em;    font-size: 2em;    border-bottom: 1px solid #eee;}h2 {    padding-bottom: 0.3em;    font-size: 1.5em;    border-bottom: 1px solid #eee;}h3 {    font-size: 1.25em;}h4 {    font-size: 1em;}h5 {    font-size: 0.875em;}h6 {    font-size: 0.85em;    color: #777;}ul,ol {    padding-left: 2em;}ul ul,ul ol,ol ol,ol ul {    margin-top: 0;    margin-bottom: 0;}li>p {    margin-top: 16px;}li+li {    margin-top: 0.25em;}dl {    padding: 0;}dl dt {    padding: 0;    margin-top: 16px;    font-size: 1em;    font-style: italic;    font-weight: bold;}dl dd {    padding: 0 16px;    margin-bottom: 16px;}table {    display: block;    width: 100%;    overflow: auto;}table th {    font-weight: bold;}table th,table td {    padding: 6px 13px;    border: 1px solid #ddd;}table tr {    background-color: #fff;    border-top: 1px solid #ccc;}table tr:nth-child(2n) {    background-color: #f8f8f8;}img {    max-width: 100%;    box-sizing: content-box;    background-color: #fff;}code {    padding: 0;    padding-top: 0.2em;    padding-bottom: 0.2em;    margin: 0;    font-size: 85%;    background-color: rgba(0, 0, 0, 0.04);    border-radius: 3px;}code::before,code::after {    letter-spacing: -0.2em;    content: "\00a0";}pre {    word-wrap: normal;}pre>code {    padding: 0;    margin: 0;    font-size: 100%;    word-break: normal;    white-space: pre;    background: transparent;    border: 0;}.highlight {    margin-bottom: 16px;}.highlight pre {    margin-bottom: 0;    word-break: normal;}.highlight pre,pre {    padding: 16px;    overflow: auto;    font-size: 85%;    line-height: 1.45;    background-color: #f7f7f7;    border-radius: 3px;}pre code {    display: inline;    max-width: auto;    padding: 0;    margin: 0;    overflow: visible;    line-height: inherit;    word-wrap: normal;    background-color: transparent;    border: 0;}pre code::before,pre code::after {    content: normal;}.pl-0 {    padding-left: 0 !important;}.pl-1 {    padding-left: 3px !important;}.pl-2 {    padding-left: 6px !important;}.pl-3 {    padding-left: 12px !important;}.pl-4 {    padding-left: 24px !important;}.pl-5 {    padding-left: 36px !important;}.pl-6 {    padding-left: 48px !important;}.full-commit .btn-outline:not(:disabled):hover {    color: #4078c0;    border: 1px solid #4078c0;}kbd {    display: inline-block;    padding: 3px 5px;    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;    line-height: 10px;    color: #555;    vertical-align: middle;    background-color: #fcfcfc;    border: solid 1px #ccc;    border-bottom-color: #bbb;    border-radius: 3px;    box-shadow: inset 0 -1px 0 #bbb;}:checked+.radio-label {    position: relative;    z-index: 1;    border-color: #4078c0;}.task-list-item {    list-style-type: none;}.task-list-item+.task-list-item {    margin-top: 3px;}.task-list-item input {    margin: 0 0.2em 0.25em -1.6em;    vertical-align: middle;}hr {    border-bottom-color: #eee;}/** Theming **/body {    color: #333;    background: white;    padding: 0 25px;}.vscode-light,.vscode-light pre code {    color: #333;}.vscode-dark,.vscode-dark pre code {    color: #333;}.vscode-high-contrast,.vscode-high-contrast pre code {    color: #333;}.vscode-light code {    color: #333;}.vscode-dark code {    color: #333;}.vscode-light pre:not(.hljs),.vscode-light code>div {    background-color: #F6F8FA;}.vscode-dark pre:not(.hljs),.vscode-dark code>div {    background-color: #F6F8FA;}.vscode-high-contrast pre:not(.hljs),.vscode-high-contrast code>div {    background-color: #F6F8FA;}.vscode-high-contrast h1 {    border-color: transparent;}.vscode-light table>thead>tr>th {    border-color: #EAECEF;}.vscode-dark table>thead>tr>th {    border-color: #EAECEF;}.vscode-light h1,.vscode-light hr,.vscode-light table>tbody>tr+tr>td {    border-color: #EAECEF;}.vscode-dark h1,.vscode-dark hr,.vscode-dark table>tbody>tr+tr>td {    border-color: #EAECEF;}.vscode-light blockquote,.vscode-dark blockquote {    padding: 0 1em;    color: #777;    border-left: 0.25em solid #ddd;    background: transparent;}.vscode-high-contrast blockquote {    padding: 0 1em;    color: #777;    border-left: 0.25em solid #ddd;    background: transparent;}/*Contact GitHub API Training Shop Blog About© 2017 GitHub, Inc. Terms Privacy Security Status Help*/