vscode Markdown 预览样式美化

优雅的使用vscode写Markdown,预览样式美化

1 介绍

我已经习惯使用vscode写markdown。不是很喜欢他的markdown样式,尤其是代码块高亮的样式。当然用vscode大家基本上都会选择安装一个Markdown-preview-enhanced的插件,这个插件的确实是非常强大。
即便自带了很多样式,但还是没有挑到一款自己喜欢的样式。

欢迎大家自定义修改并提交主题,提供更多样式,Markdown-preview-enhanced 插件自带Markdown样式都不是很好看,同时样式自定义方面有很少的相关博文。

样式开源地址 GitHub

1.1 大致效果

我找了以前写的一道题解来试试效果,下面是导出的pdf,

IMG_20200724_042128
IMG_20200724_042148

2 主题预览

20200723221741

2.1 链接

20200723222844

2.2 单行代码

这是单行代码maserhe.top
20200723223223

2.3 表格

20200723223413

2.4 代码块

20200723223657

2.5 …还有好多,不演示了。

3 Markdown语法

请参考 w3c 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
QQ截图20200723204205

preview_theme 这里存放的是 Markdown 排版样式,你把刚刚得到的mystyle.css文件放进去就行了。
prism_theme 这里存放的是 代码块 排版样式,你把刚刚得到的codeblock.css文件放进去就行了。

4.3 配置json文件。

打开vscode , 输入 Ctrl-shift-p然后打开 Open Settings(json)文件

20200723231108

修改 红框圈起来的两项,第一项为 Markdown 的排版样式。
第二项为 代码块的样式。
QQ截图20200723204013

配置好之后再打开 Markdown 预览看一下,是不是美观很多?

4.4 导出pdf文件

光自己看可不行啊,最终还是要导出pdf呢!

20200723231648
在预览界面 右键》HTML》HTML(offline) 生成html文件后,找到html文件我们用谷歌浏览打开html文件。我们可以使用谷歌浏览器的HTML打印功能生成干干净净的pdf。

13

注意选择Goolge浏览器打印时,
456
把背景图型哪一项给勾选上,然后就能生成好看的pdf文件了。

后话

其实 markdown-preview-enhanced 带的插件也不少,你们喜欢的话也可以自己调换一个自己喜欢的风格。

打开 vscode 在设置中 搜索Markdown-preview-enhanced: Preview Theme 可以更改自己喜欢的样式。
QQ截图20200723233917
声明
样式参考了 https://preview.mdnice.com/themes/ 中的主题 前端之巅。修改成vscode上Markdown-preview-enhanced 插件可兼容
并且 加入了 Mac风格的代码块 样式。如有错误请指明,欢迎大家一起交流学习。
如转载或参考本博客,请标明出处
我的博客 链接
样式开源地址 GitHub 喜欢的话给个star

在使用VSCode查看Markdown文件时,可以通过添加Markdown预览扩展来查看Markdown的页面效果。具体的使用方法如下: 1. 添加插件:需要安装三个插件,分别是MarkDown All in One(提供Markdown功能),Markdown Preview Github Styling(提供GitHub渲染风格)和Markdown Preview Enhanced(提供导出功能)。 2. 创建Markdown文件:新建一个Markdown文件,并输入相应的内容。 3. 查看预览:有两种方法可以查看Markdown预览效果。一种是在VSCode内,按下Ctrl + Shift + V快捷键,即可显示Markdown预览效果。另一种是在VSCode中按下F1,然后输入"markdown:在侧边打开锁定的预览",即可在侧边栏打开锁定的预览窗口。 通过以上方法,你可以方便地在VSCode预览Markdown文件的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vscode怎样预览markdown文件](https://blog.csdn.net/sinat_16643223/article/details/110427116)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【vscode】使用vscode编写markdown,并预览效果](https://blog.csdn.net/m0_57168310/article/details/127636992)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值