vscode 修改默认 Markdown 预览样式
2017-05-19 10:32
513 查看
如何修改 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*/
相关文章推荐
- VSCode中预览markdown和修改预览样式
- 修改系统自带默认的输入法,系统自带键盘的样式
- Android中如何修改SeekBar的默认样式
- vscode 配置 markdown(.md) 预览
- mint ui修改默认样式
- iOS中默认样式修改
- 织梦默认分页样式修改 解决分页列表显示,去掉li
- 修改文件上传默认样式
- 移动端网页修改滚动条样式使滚动条默认显示
- input 默认边框样式的修改
- 修改webkit默认样式及定制漂亮的表单
- input[type="date"]默认样式修改
- 微信小程序循环列表添加默认事件,默认样式,点击后修改样式
- Vue修改mint-ui默认样式的方法
- 【转】修改默认样式 Flex学习笔记
- android中Spinner修改默认文本框的样式
- 微信小程序修改swiper默认指示器样式的实例代码
- 修改dedecms文章默认链接样式,利于SEO优化
- 用css修改input[type=checkbox]时默认样式
- css修改下拉列表select的默认样式