vscode Markdown 预览样式美化多方案推荐

news/2024/6/17 8:19:05 标签: vscode, 编辑器, markdown样式

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

1 介绍

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

官方文档:https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/config

样式开源地址: 样式链接

1.1 大致效果

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


2 主题预览

2.1 单行代码

这是单行代码maserhe.top

2.2 表格

2.3 代码块

3 Markdown 语法

请参考 w3c Markdown 语法快速入门手册

4 操作

4.1前提

你已经安装好 markdown-preview-enhanced这个强大的插件了,
没有安装?
打开 vscode 编辑器,在插件页搜索 markdown-preview-enhanced,接着点击 Install 按钮。

4.1 clone 源码

https://github.com/Maserhe/VScode-Markdown-theme-Maserhe

首先将源码clone到本地, 当然也可以直接预览复制代码, 在电脑上新建txt文件, 把代码复制上去改一下后缀为css
mystyle.css存放的是 Markdown 排版样式。
codeblock.css存放的是 代码块样式。
当然你可以自己进行自定义修改成你自己喜欢的样式,很多地方我都加上了注释。

vscode_Markdownpreviewenhanced__59">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 可以更改自己喜欢的样式。


http://www.niftyadmin.cn/n/5227958.html

相关文章

在Pycharm中创建项目新环境,安装Pytorch

在python项目中,很多项目使用的各类包的版本是不一致的。所以我们可以对每个项目有专属于它的环境。所以这个文章就是教你如何创建新环境。 一、创建新环境 首先我们需要去官网下载conda。然后在Pycharm下面添加conda的可执行文件。 用conda创建新环境。 二、…

【开题报告】基于微信小程序的情侣互动小程序的设计与实现

1.研究背景 伴随着移动互联网的快速发展和智能手机的普及,人们越来越依赖于手机进行日常生活和工作。在这种背景下,基于微信小程序的应用得到了快速发展,成为了人们日常使用最多的一种移动应用之一。在情侣群体中,有很多人希望能…

电商营销场景的RocketMQ实战02-第一版

营销系统运行架构图 营销系统技术架构图 测试版技术方案v1.0 千万级用户营销系统生产方案 业务场景介绍 rocketmq如何用到面试里去,rocketmq原理,面试常问的一些东西,《消息中间件实战高手》专栏(rocketmq解决方案 基本原理&…

Web3之L2 ZK-Rollup 方案-StarkNet

文章目录 L2 ZK-Rollup 方案-StarkNet一、StarkWareStarkWare 团队 二、什么是StarkNet三、Layer2 扩容项目-以太坊二层解决方案zkSync与Starkware的对比其他参考 L2 ZK-Rollup 方案-StarkNet 一、StarkWare 官网: https://starkware.co/ StarkWare 主要解决了区…

Python与GPU编程快速入门(三)

3、使用Numba加速Python代码 Numba 是一个 Python 库,它使用行业标准 LLVM 编译器库在运行时将 Python 函数转换为优化的机器代码。 您可能想尝试用它来加速 CPU 上的代码。 然而,Numba还可以将Python 语言的子集转换为CUDA,这就是我们将在这里使用的。 所以我们的想法是,…

CTO对生活和工作一点感悟

陌生人,你好啊。 感谢CSDN平台让我们有了隔空认识,交流的机会。 我是谁? 我呢,毕业快11年,在网易做了几年云计算,后来追风赶上了大数据的浪潮,再到后来混迹在AI、智能推荐等领域。 因为有一颗…

替代升级虚拟化 | ZStack Cloud云平台助力中节能镇江公司核心业务上云

数字经济正加速推动各行各业的高质量升级发展,云计算是数字经济的核心底层基础设施。作为云基础软件企业,云轴科技ZStack 坚持自主创新,自研架构,产品矩阵可全面覆盖数据中心云基础设施,针对虚拟化资源实现纳管、替代和…

简单0成本构建一个企业内部的视频点播、培训直播、安防监控、录像管理于一体的数字视频管理体系

以前,企业要构建一套数字化的视频管理体系,把企业内部的各种视频文件、直播培训、安防监控视频都整合到一套流媒体音视频服务里面,实现统一的对外供货、对外赋能的方案,是很困难的!因为,原来这都是好几个项…