使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)
1. 引言
编写Markdown文档现在可以说是程序员的必备技能了，因为Markdown很好地实现了内容与排版分离，可以让程序员更专注于内容的创作。现在很多技术文档，博客发布甚至AI文字输出的内容都是以Markdown格式的形式输出的。那么，Markdown文档如何渲染成标准的Web网页呢？这就要借助于一些支持Markdown格式的编辑器组件了。开源的Markdown编辑器组件有不少，Vditor是笔者认为功能比较全的一款，在这里本文就通过Vditor来实现将一个Markdown文档渲染成网页的具体案例。
阅读本文可能需要的前置文章：《使用Vite创建一个动态网页的前端项目》。
2. 实现
使用VS Code打开Vite初始化的工程，并且准备一个Markdown文档（笔者这里用的是Vditor的说明文档），文件组织如下所示：
my-native-js-app
├── public
│ └── demo.md
├── src
│ ├── main.js
│ └── style.css
├── index.html
└── package.json
打开终端，输入如下指令，安装Vditor依赖包：
npm install vditor --save
2.1 基本配置
修改index.html中的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<div id="md-content"></div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
其中，名称为md-content的元素就是用来显示Markdown文档的容器。接着是style.css：
#app {
width: 800px;
margin: 0 auto;
}
也非常简单，就是限制了显示Markdown文档的宽度以及设置居中显示。对于一个文字为主的网页来说，文档的宽度不宜太宽，现代主流的文档网页的设计都是600~800px左右。
最后就是关键的实现主要功能代码main.js：
import "./style.css";
import "vditor/dist/index.css";
import Vditor from "vditor";
async function initMarkdown() {
try {
const response = await fetch("/demo.md");
if (!response.ok) {
throw new Error("网络无响应");
}
const demoMd = await response.text();
// 显示内容
Vditor.preview(document.getElementById("md-content"), demoMd, {
markdown: {
toc: false,
mark: true, //==高亮显示==
footnotes: true, //脚注
autoSpace: true, //自动空格，适合中英文混合排版
},
math: {
engine: "KaTeX", //支持latex公式
inlineDigit: true, //内联公式可以接数字
},
hljs: {
style: "github", //代码段样式
lineNumber: true, //是否显示行号
},
anchor: 2, // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后
lang: "zh_CN", //中文
theme: {
current: "light", //light,dark,light,wechat
},
transform: (html) => {
// 使用正则表达式替换图片路径，并添加居中样式及题注
return html.replace(
/<img\s+[^>]*src="\.\/([^"]+)\.([a-zA-Z0-9]+)"\s*alt="([^"]*)"[^>]*>/g,
(match, p1, p2, altText) => {
// const newSrc = `${backendUrl}/blogs/resources/images/${postId}/${p1}.${p2}`;
const newSrc = `${p1}.${p2}`;
const imgWithCaption = `
<div style="text-align: center;">
<img src="${newSrc}" class="center-image" alt="${altText}">
<p class="caption">${altText}</p>
</div>
`;
return imgWithCaption;
}
);
},
});
} catch (error) {
console.error("初始化Markdown失败:", error);
}
}
document.addEventListener("DOMContentLoaded", initMarkdown);
实现的过程很简单，就是在以文本的形式fetch远端的Markdown文档数据，然后使用Vditor.preview接口将获取的文本数据初始化到HTML的md-content元素中。关键是这个接口的初始化配置参数，具体的代表的功能笔者已经注释到代码中。其他的配置参数非常简单，按需进行配置即可；有点特别的是这个transform参数：
transform: (html) => {
// 使用正则表达式替换图片路径，并添加居中样式及题注
return html.replace(
/<img\s+[^>]*src="\.\/([^"]+)\.([a-zA-Z0-9]+)"\s*alt="([^"]*)"[^>]*>/g,
(match, p1, p2, altText) => {
// const newSrc = `${backendUrl}/blogs/resources/images/${postId}/${p1}.${p2}`;
const newSrc = `${p1}.${p2}`;
const imgWithCaption = `
<div style="text-align: center;">
<img src="${newSrc}" class="center-image" alt="${altText}">
<p class="caption">${altText}</p>
</div>
`;
return imgWithCaption;
}
);
},
2.2 图片居中+题注
这个配置参数是用来配置渲染成HTML页面前的回调函数，我们可以用这个回调函数做什么呢？很简单，可以用来实现一些特殊的元素设计。比如说，Markdown格式标准非常简陋，只规定了如何引入图片，但是没有规定如何设置图片的样式。HTML的文档流是从上到下、从左到右的线性布局的，默认情况下图片是放在新的一行的最左边的。但是实际上更最美观的实现是图片居中展示，并且显示题注。
例如，在这里笔者的Markdown文档中图片相关的内容及最终实现效果是：
在transform指定的回调函数中，也就是这里的html其实是个HTML字符串：
<h3 id="图片">图片<a id="vditorAnchor-图片" class="vditor-anchor" href="#图片"><svg viewBox="0 0 16 16" version="1.1" width="16" height="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a></h3>
<pre><code>
</code></pre>
<p><img src="./head.jpg" alt="案例图片" /></p>
要实现图片居中，并且增加图片题注就很简单了，通过正则表达式搜索到图片的元素<img src="./head.jpg" alt="案例图片" />，将其替换成带题注并且居中的div元素，也就是：
const imgWithCaption = `
<div style="text-align: center;">
<img src="${newSrc}" class="center-image" alt="${altText}">
<p class="caption">${altText}</p>
</div>
`;
最终，这个Markdown文档的图片的网页渲染效果就是：
2.3 图片源更换
笔者实现的另外一个定制功能就是实现更换图片源地址。如果我们经常编写Markdown文档就知道，因为Markdown格式是文字与图片分离的，因此对图片资源的管理是件很麻烦的事情：如果使用base64编码嵌到Markdown文档里，就会影响可读性；如果使用在线图床，要么花钱要么花精力，要么既花钱又花精力。所以笔者还是推荐使用本地相对地址，例如：
这样的写法，先保证本地文档能正常工作。但是Markdown文档在渲染成网页后这个相对地址就不一样生效了，往往需要对图片地址进行更换。更关键的是，像图片这种稍微重一点的资源最好放到CDN上，所以图片源地址的更换就是个强需求，也就是这部分代码的意思：
return html.replace(
/<img\s+[^>]*src="\.\/([^"]+)\.([a-zA-Z0-9]+)"\s*alt="([^"]*)"[^>]*>/g,
(match, p1, p2, altText) => {
// const newSrc = `${backendUrl}/blogs/resources/images/${postId}/${p1}.${p2}`;
const newSrc = `${p1}.${p2}`;
//...
}
);
先用正则表达式找到图片元素的内容，然后对图片地址进行更换，更换成域内的短地址，也可以使用域外的长地址。也就是不要在Markdown文档本身下功夫，保证本地可以正常显示即可，更多的具体的定制功能通过Vditor渲染前回调来实现。
3. 结语
这个案例最终的显示效果如下所示：
甚至可以表现脑图、流程图、时序图、甘特图、图表、五线谱、流程图等：
不得不说Vditor不一定是所有Markdown编辑器中最好用，但一定是功能比较全的编辑器了，至少比笔者使用过的tui.editor要强不少。其实通过这个功能，你就可以大致实现一个技术博客网站了。具体思路是：把这个渲染过程工具化，将Markdown格式的博客文档批量生成静态网页，然后通过Web服务器进行发布；其实这也是一些静态博客网站工具的实现思路。
使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)的更多相关文章
- 超级简单！把文档转换成网页格式(Core)
因为需要把好多的文档放在服务器上访问,最开始是使用第3方网站www.aconvert.com,这个其实也挺方便的, 最后由于一些需求原因,最终只有依靠代码来进行,以下是简化后的代码 创建一个控制台应用 ...
- C#实现生成Markdown文档目录树
前言 之前我写了一篇关于C#处理Markdown文档的文章:C#解析Markdown文档,实现替换图片链接操作 算是第一次尝试使用C#处理Markdown文档,然后最近又把博客网站的前台改了一下,目前 ...
- 使用Python从Markdown文档中自动生成标题导航
概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...
- vscode使用Markdown文档编写
首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默认集成markdown文档编辑插件.可以新建一 ...
- 使用vs code编写Markdown文档以及markdown语法详解
首先安装vscode工具,下载地址如下: https://code.visualstudio.com/ 在vs code的扩展中安装: Markdown Preview Enhanced 这款插件,安 ...
- js 加载并解析Markdown文档
网上有很多网站会通过.md文档来做页面内容(比如,阮一峰老师的es6入门blog: http://es6.ruanyifeng.com/),很好奇,这是怎么做的?(至于.md是什么,或许(https: ...
- 小技巧：用 GitBook 组织 Markdown 文档
喜欢用 Markdown 写文档,那怎么把一个个 Markdown 文档组成在一起呢? 这篇文章,分享了一个用 GitBook 来组织 Markdown 文档的办法.一起了解下吧. Markdown ...
- VS Code 搭建合适的 markdown 文档编写环境
写在开头,之前我是使用Gitee与Github作为图床和Picgo搭配Typora使用的 ,但因为最近觉得这样还是稍微比较繁琐,然后因为VS Code是我的主要文本编辑器.Cpp,Python等均是在 ...
- python实现解析markdown文档中的图片，并且保存到本地~
背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...
- 使用 VS Code 撰写 Markdown 文档
众所周知, VS Code 是微软和社区一起开发的一款很优秀的高级代码编辑器.它不仅可以写出一手好代码,还能写出一篇好文章.利用 Markdown 就可以写出一篇排版美观的技术文章了. 而 Markd ...
随机推荐
- sap 管理--企业解决方案 -设备管理
1.什么是sap 管理 2.设备管理管的是什么 3.设备的几种状态 4.设备bom(物料清单) 5.测量点计数器 1.什么是sap 管理 System Applications and Product ...
- selenium 进入页面提示 503 Service Temporarily Unavailable
进入三级页面提示503 Service Temporarily Unavailable,如果手动刷新页面重新加载成功 网上看都是如何配置及原因的,没告诉如何解决 于是我想,如果是这样的话,执行刷新操作 ...
- Jmeter tcp 返回500，但服务器收到请求
解决方法:再end of line(Eol)bytes value 正确写上报文最后两位十进制字节码
- 五大股票金融数据API接口推荐：从实时行情到历史数据全覆盖
摘要:本文将介绍五大主流的股票金融数据API接口,涵盖实时行情.历史数据.技术指标等功能,帮助开发者快速构建金融数据应用.(本文由deepseek生成) 一.StockTV API 1. 核心优势 全 ...
- k8s报错Error: template: nvidia-device-plugin/templates/gfd.yml:22:19: executing "nvidia-device-plugin/templates/gfd.yml" at <.Subcharts.gfd>: nil pointer evaluating interface {}.gfd
前言 在安装 kubernetes 插件 k8s-device-plugin时,报错: Error: template: nvidia-device-plugin/templates/gfd.yml: ...
- mysql frm、MYD、MYI数据文件恢复，导入MySQL中
前言 .frm..MYI..MYD 文件分别是 MySQL 的 MyISAM存储引擎存储的表结构.索引.数据文件. 简单方法恢复数据 .frm..MYI..MYD文件如果直接以文本打开,全部会以二进制 ...
- linux 下给网卡添加ipv6、路由
route命令的使用举例如下: route // 显示路由信息. route add –host 192.168.1.110 dev eth0 // 给网卡eth0的路由表中加入新地址192 ...
- 集合体系介绍、collection的使用--java进阶day09
1.集合体系结构 我们要学习的集合大体分为两种,一种是单列集合,一种是双列集合 2.单列集合 单列集合又分为两个派系,分别为list接口和set接口,这两个接口皆是collection接口的子接口 3 ...
- 【Linux】3.5 实用指令
实用指令 1. 指定运行级别(7个级别) 0.关机[一旦开机它就会执行关机] 1.单用户[找回丢失密码] 2.多用户状态没有网络服务 3.多用户状态有网络服务 4.系统未使用保留给用户 5.图形界面 ...
- AI工具推荐：使用AnythingLLM帮助你学习
AnythingLLM介绍 AnythingLLM 是一个最容易使用的全能 AI 应用,可以进行 RAG.AI 代理等多种功能,无需编写代码或担心基础设施问题. GitHub地址:https://gi ...