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.mzph.cn/news/174687.shtml

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

相关文章

SpringBoot定时任务报错Unexpected error occurred in scheduled task原因及其解决方法(亲测有效)

问题 spring boot项目在线上一直正常运行没有错误,然后今天发生了报错,如图 这是一个定时器错误,发生这个报错 主要有两个原因 定时器编写的有错误Scheduled注解方式级别高于资源注入级别,导致了资源注入失败 以下是我的代码 …

单片机学习4——中断的概念

中断的概念: CPU在处理A事件的时候,发生了B事件,请求CPU迅速去处理。(中断产生) CPU暂时中断当前的工作,转去处理B事件。(中断响应和中断服务) 待CPU将B事件处理完毕后&#xff0…

【数据结构初阶(5)】链式队列的基本操作实现

文章目录 队列的定义初始化队列队尾入队列队头出队列取队头元素取队尾元素获取队列有效元素个数判断队空销毁队列 因为队列比较简单,关于队列的概念就不过多赘述了,本文只讲链队的基本操作实现 队列的定义 定义队列结点结构 链队中的每个结点都应该包…

Go 数字类型

一、数字类型 1、Golang 数据类型介绍 Go 语言中数据类型分为:基本数据类型和复合数据类型基本数据类型有: 整型、浮点型、布尔型、字符串复合数据类型有: 数组、切片、结构体、函数、map、通道(channel)、接口 2、…

什么是 dropblock

大家好啊,我是董董灿。 之前介绍过 dropout 算法,它在训练神经网络中,可以随机丢弃神经元,是一种防止网络过拟合的方法。 但是在卷积神经网络中,dropout 的表现却不是很好,于是研究人员又搞了一个“结构化…

Python列表:操作与实例分析,你值得一看!

Python列表是一种重要的数据结构,它允许您存储和管理多个数据项。本文将深入探讨Python列表的操作,以及通过具体实例分析如何使用它们,以帮助您更好地理解和优化您的代码。 什么是Python列表? Python列表是一种有序、可变的数据结…

基于51单片机的全自动洗衣机proteus仿真设计

标题目录 💫51单片机全自动洗衣机proteus仿真设计💫设计介绍💫仿真图电动机驱动模块电路设计电源模块电路设计控制按键进水阀和排水阀控制继电器 💫程序设计main函数 💫设计报告💫资料清单&&下载链…

PC行内编辑

点击编辑,行内编辑输入框出现,给列表的每条数据定义编辑标记,最后一定记得 v-model双向绑定,使数据回显。 步骤: 1、给行数据定义编辑标记 2、点击行编辑标记(isedit) 3、插槽根据标记渲染表单 …

探究Kafka原理-6.CAP理论实践

👏作者简介:大家好,我是爱吃芝士的土豆倪,24届校招生Java选手,很高兴认识大家📕系列专栏:Spring源码、JUC源码、Kafka原理🔥如果感觉博主的文章还不错的话,请&#x1f44…

Transformer中的多头注意力机制-为什么需要多头?

Transformer为什么使用多头注意力机制呢? 多头可以学习到不同维度的特征和信息。为什么可以学习到不同维度的信息呢? 答案是:多头注意力机制的组成是有单个的self attention,由于self attention通过产生QKV矩阵来学习数据特征&a…

leetCode 1026. 节点与其祖先之间的最大差值 + 递归

1026. 节点与其祖先之间的最大差值 - 力扣(LeetCode) 给定二叉树的根节点 root,找出存在于 不同 节点 A 和 B 之间的最大值 V,其中 V |A.val - B.val|,且 A 是 B 的祖先。(如果 A 的任何子节点之一为 B&am…

网络和Linux网络_5(应用层)HTTP协议(方法+报头+状态码)

目录 1. HTTP协议介绍 1.1 URL介绍 1.2 urlencode和urldecode 1.3 HTTP协议格式 1.4 HTTP的方法和报头和状态码 2. 代码验证HTTP协议格式 HttpServer.hpp 2.2 html正式测试 Util.hpp index.html 2.3 再看HTTP方法和报头和状态码 2.3.1 方法_GET和POST等 2.3.2 报头…

SpringBoot——国际化

优质博文:IT-BLOG-CN 一、Spring 编写国际化时的步骤 【1】编写国际化配置文件; 【2】使用ResourceBundleMessageSource管理国际化资源文件; 【3】在页面使用ftp:message取出国际化内容; 二、SpringBoot编写国际化步骤 【1】创…

软件工程期末复习(选择+填空+判断)

文章目录 软件工程期末复习一、 选择题 软件工程期末复习 一、 选择题 1.“软件危机”的表现不包括:(c) A、软件产品不能按期交付 B、用户对“已完成的”软件产品时常不满意 C、程序员越来越供不应求 D、软件项目难以管理,维护困…

东胜物流软件 SQL注入漏洞复现

0x01 产品简介 东胜物流软件是一款致力于为客户提供IT支撑的 SOP, 帮助客户大幅提高工作效率,降低各个环节潜在风险的物流软件。 0x02 漏洞概述 东胜物流软件 TCodeVoynoAdapter.aspx、/TruckMng/MsWlDriver/GetDataList、/MvcShipping/MsBaseInfo/Sav…

CSS3制作3D爱心动画

1、什么是CSS css,即层叠样式表的简称,是一种标记语言,有浏览器解释执行用来使页面变得更美观。 2、选择器 css3中新增了一些选择器,如下: 3、新样式 边框 css3新增了三个边框属性,分别是: bo…

linux之下安装 nacos

1 下载地址 也可使用在线下载wget https://github.com/alibaba/nacos/releases/download/1.4.6/nacos-server-1.4.6.tar.gzTags alibaba/nacos GitHuban easy-to-use dynamic service discovery, configuration and service management platform for building cloud nativ…

android trace文件的抓取与查看方法

本地手机抓取trace 解压android trace文件的抓取与查看方法 找到config.pbtx文件,连接手机push进去 # push config.pbtx ,/data/local/tmp/为自定义push到的目录 adb push config.pbtx /data/local/tmp/ adb shell # 抓取trace, /data/loc…

【MyBatisPlus】通俗易懂 快速入门 详细教程

目录 学习目标 一、MyBatisPlus简介 1. 入门案例 问题导入 1.1 SpringBoot整合MyBatisPlus入门程序 ①:创建新模块,选择Spring初始化,并配置模块相关基础信息 ②:选择当前模块需要使用的技术集(仅保留JDBC&…

bodymovin:AE动画导出为JSONforMac/win中文版下载

对于动画制作爱好者和专业设计师来说,Adobe After Effects(AE)是一个强大的工具,可以创造出惊人的动画效果。然而,将这些动画导出为可交互的格式一直是一个挑战。现在,有了bodymovin,你可以轻松…