vscode Markdown 样式自定义
vscode Markdown 样式自定义
1 介绍
我已经习惯使用vscode写markdown。不是很喜欢他的markdown样式，尤其是代码块高亮的样式。当然用vscode大家基本上都会选择安装一个Markdown-preview-enhanced的插件，这个插件的确实是非常强大。
即便自带了很多样式,但还是没有挑到一款自己喜欢的样式。
欢迎大家自定义修改并提交主题，提供更多样式，Markdown-preview-enhanced 插件自带Markdown样式都不是很好看，同时样式自定义方面有很少的相关博文。
样式开源地址 GitHub
1.1 大致效果
我找了以前写的一道题解来试试效果，下面是导出的pdf,
2 主题预览
2.1 链接
2.2 单行代码
这是单行代码maserhe.top
2.3 表格
2.4 代码块
2.5 …还有好多，不演示了。
3 Markdown语法
4 操作
前提
你已经安装好 markdown-preview-enhanced这个强大的插件了，
没有安装？
打开 vscode 编辑器，在插件页搜索 markdown-preview-enhanced，接着点击 Install 按钮。
4.1 clone源码
首先将源码clone到本地,当然也可以直接预览复制代码,在电脑上新建txt文件,把代码复制上去改一下后缀为css。mystyle.css存放的是 Markdown 排版样式。codeblock.css存放的是 代码块样式。
当然你可以自己进行自定义修改成你自己喜欢的样式，很多地方我都加上了注释。
4.2 找到vscode Markdown-preview-enhanced 插件主题位置
文件大致位置在 C:\Users\你的用户名\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.12\node_modules\@shd101wyy\mume\styles
preview_theme 这里存放的是 Markdown 排版样式，你把刚刚得到的mystyle.css文件放进去就行了。
prism_theme 这里存放的是 代码块 排版样式，你把刚刚得到的codeblock.css文件放进去就行了。
4.3 配置json文件。
打开vscode , 输入 Ctrl-shift-p然后打开 Open Settings(json)文件
修改 红框圈起来的两项,第一项为 Markdown 的排版样式。
第二项为 代码块的样式。
配置好之后再打开 Markdown 预览看一下，是不是美观很多？
4.4 导出pdf文件
光自己看可不行啊，最终还是要导出pdf呢！
在预览界面 右键》HTML》HTML(offline) 生成html文件后，找到html文件我们用谷歌浏览打开html文件。我们可以使用谷歌浏览器的HTML打印功能生成干干净净的pdf。
注意选择Goolge浏览器打印时，
把背景图型哪一项给勾选上，然后就能生成好看的pdf文件了。
后话
其实 markdown-preview-enhanced 带的插件也不少，你们喜欢的话也可以自己调换一个自己喜欢的风格。
打开 vscode 在设置中 搜索Markdown-preview-enhanced: Preview Theme 可以更改自己喜欢的样式。
声明
样式参考了 https://preview.mdnice.com/themes/ 中的主题 前端之巅。修改成vscode上Markdown-preview-enhanced 插件可兼容
并且 加入了 Mac风格的代码块 样式。如有错误请指明,欢迎大家一起交流学习。
如转载或参考本博客，请标明出处
我的博客 链接
样式开源地址 GitHub 喜欢的话给个star