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

优雅的使用 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存放的是 代码块样式。
当然你可以自己进行自定义修改成你自己喜欢的样式,很多地方我都加上了注释。

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.hqwc.cn/news/234979.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【DDD】领域驱动设计总结——如何构造领域模型

文章目录 一 分离领域二 领域对象分类2.1 实体(ENTITY)2.2 值对象(VALUE OBJECT)2.3 服务(SERVICE)2.4 模块(MODULE) 三 管理领域对象的生命周期3.1 聚合(AGGREGATE)3.2 工厂(FACTORY)3.3 存储库…

mysql:免费的GUI客户端工具推荐并介绍常用的操作

给大家推荐几个常用的 mysql 数据库客户端 sequel-pro sequel-ace 官网下载地址 免费 sequel-ace 可以理解为 Sequel Pro 的升级版,由于Sequel Pro官方不维护了,特别是对 MySQL 8.0 支持不好,所以现在由社区维护了新分支 sequel-ace&#x…

具备这四个特征的项目经理,牛逼!

大家好,我是老原。 成为一个业绩第一又能准时下班的工作强人,应该是每个职场人的梦想,但现实往往不那么尽如人意…… 虽然如此,但是不代表我们不能向能做到这样的大佬看齐啊。 工作十余年,见过各种各样的职场人士&a…

C++——解锁string常用接口

目录 string::npos; 1.测试string容量相关的接口: 1.1 string::size() 1.2 string::clear() 1.3 string::resize() 1.4 string::erase() 1.5 string::reserve() 保留 1.6 std::string::shrink_to_fit 2.string数据插入删除相关的接口 2.1 std::string::pus…

数据结构学习笔记(王道)

数据结构学习笔记(王道) PS:本文章部分内容参考自王道考研数据结构笔记 文章目录 数据结构学习笔记(王道)一、绪论1.1. 数据结构1.2. 算法1.2.1. 算法的基本概念1.2.2. 算法的时间复杂度1.2.3. 算法的空间复杂度 二、…

Java封装讯飞星火大模型历险记

问题描述与分析 现状描述与目标 在使用讯飞星火大模型API的过程中,API的返回结果在可以在其他线程中进行分次打印,但是在main方法中直接打印返回结果,显示为空。这种情况下不利于二次封装,希望在main方法中获取完整的API返回结果…

Java中的synchronized关键字

目录 1、synchronized是什么 2、synchronized的用法 synchronized可以用在方法或者代码块上,分别称为同步方法和同步代码块。 用法理解 3、synchronized的实现原理 ⭐synchronized锁的对比 4、synchronized的优缺点 ⭐扩展:synchronized 和 vola…

NSSCTF第14页(2)

[UUCTF 2022 新生赛]ezpop 提示说看看反序列化字符串逃逸 PHP反序列化字符串逃逸_php反序列化逃逸-CSDN博客 php反序列化字符逃逸_php反序列化逃逸_Leekos的博客-CSDN博客 buuctf刷题9 (反序列化逃逸&shtml-SSI远程命令执行&idna与utf-8编码漏洞)_extract($_post);…

JeecgBoot低代码开发—Vue3版前端入门教程

JeecgBoot低代码开发—Vue3版前端入门教程 后端接口配置VUE3 必备知识1.vue3新特性a. https://v3.cn.vuejs.org/b.setup的用法c.ref 和 reactive 的用法d.新版 v-model 的用法e.script setup的用法 2.TypeScript基础 后端接口配置 如何修改后台项目路径 http://127.168.3.52:8…

MySQL处理并发访问和高负载的关键技术和策略

我深知在数据库管理中处理并发访问和高负载的重要性。在这篇文章中,我将探讨MySQL处理并发访问和高负载的关键技术和策略,以帮助读者更好地优化数据库性能。 图片来源:MySQL处理并发访问和高负载的关键技术和策略 MySQL数据库在处理并发访问…

【合集】MQ消息队列——Message Queue消息队列的合集文章 RabbitMQ入门到使用

前言 RabbitMQ作为一款常用的消息中间件,在微服务项目中得到大量应用,其本身是微服务中的重点和难点。本篇博客是Message Queue相关的学习博客文章的合集篇,目前主要是RabbitMQ入门到使用文章,后续会扩展其他MQ。 目录 前言一、R…

ssm+vue的公司安全生产考试系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频: ssmvue的公司安全生产考试系统(有报告)。Javaee项目,ssm vue前后端分离项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结…