当前位置： 首页 > article >正文

使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)

article 2025/6/1 15:33:01

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文档中图片相关的内容及最终实现效果是：

使用VS Code展示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>![alt 文本](http://image-path.png)
![alt 文本](http://image-path.png &quot;图片 Title 值&quot;)
</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文档的图片的网页渲染效果就是：

自定义Markdown文档图片元素的默认样式

2.3 图片源更换

笔者实现的另外一个定制功能就是实现更换图片源地址。如果我们经常编写Markdown文档就知道，因为Markdown格式是文字与图片分离的，因此对图片资源的管理是件很麻烦的事情：如果使用base64编码嵌到Markdown文档里，就会影响可读性；如果使用在线图床，要么花钱要么花精力，要么既花钱又花精力。所以笔者还是推荐使用本地相对地址，例如：

![自定义Markdown文档图片元素的默认样式](./2.jpg)

这样的写法，先保证本地文档能正常工作。但是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渲染成网页的效果
甚至可以表现脑图、流程图、时序图、甘特图、图表、五线谱、流程图等：

Vditor将Markdown渲染成网页的效果

不得不说Vditor不一定是所有Markdown编辑器中最好用，但一定是功能比较全的编辑器了，至少比笔者使用过的tui.editor要强不少。其实通过这个功能，你就可以大致实现一个技术博客网站了。具体思路是：把这个渲染过程工具化，将Markdown格式的博客文档批量生成静态网页，然后通过Web服务器进行发布；其实这也是一些静态博客网站工具的实现思路。

实现代码

相关文章：

使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)

1. 引言 编写Markdown文档现在可以说是程序员的必备技能了&#xff0c;因为Markdown很好地实现了内容与排版分离&#xff0c;可以让程序员更专注于内容的创作。现在很多技术文档&#xff0c;博客发布甚至AI文字输出的内容都是以Markdown格式的形式输出的。那么&#xff0c;Mar…...

编程日记 2025/6/1 15:33:01

Python打卡DAY40

知识点回顾&#xff1a; 彩色和灰度图片测试和训练的规范写法&#xff1a;封装在函数中展平操作&#xff1a;除第一个维度batchsize外全部展平dropout操作&#xff1a;训练阶段随机丢弃神经元&#xff0c;测试阶段eval模式关闭dropout 作业&#xff1a;仔细学习下测试和训练代码…...

编程日记 2025/6/1 14:46:30

OPC Client第6讲（wxwidgets）：Logger.h日志记录文件（单例模式）；登录后的主界面

接上一讲三、2、2>4》&#xff0c;创建logger.h和helper_t.h里的gettime函数 即解决下图的报红 同时&#xff0c;接上一讲二、3、点击“确认”按钮后&#xff0c;进入MainFrame.h对应的下述界面&#xff0c;此讲下图进行实现 一、创建Logger.h&#xff1a;日志记录文件&…...

编程日记 2025/5/31 9:03:36

CesiumInstancedMesh 实例

CesiumInstancedMesh 实例 import * as Cesium from cesium;// Three.js 风格的 InstancedMesh 类, https://threejs.org/docs/#api/en/objects/InstancedMesh export class CesiumInstancedMesh {/*** Creates an instance of InstancedMesh.** param {Cesium.Geometry} geom…...

编程日记 2025/6/1 10:16:16

单细胞注释前沿：CASSIA——无参考、可解释、自动化细胞注释的大语言模型

细胞类型注释是单细胞RNA-seq分析的重要步骤&#xff0c;目前有许多注释方法。大多数注释方法都需要计算和特定领域专业知识的结合&#xff0c;而且经常产生不一致的结果&#xff0c;难以解释。大语言模型有可能在减少人工输入和提高准确性的同时扩大可访问性&#xff0c;但现有…...

编程日记 2025/6/1 20:01:54

历年武汉大学计算机保研上机真题

2025武汉大学计算机保研上机真题 2024武汉大学计算机保研上机真题 2023武汉大学计算机保研上机真题 在线测评链接&#xff1a;https://pgcode.cn/school 分段函数计算 题目描述 写程序计算如下分段函数&#xff1a; 当 x > 0 x > 0 x>0 时&#xff0c; f ( x ) …...

编程日记 2025/6/1 23:27:19

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（30）：みます

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（30）：みます 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）ように　復習：1、ように　Change１２、ように　Ideal state（理想（りそう）の状態（じょうたい））３、V辞書・Vない　ようにしています　いつも気をつけて…...

编程日记 2025/5/31 8:59:28

AR-HUD 光波导方案优化难题待解？OAS 光学软件来破局

波导-HUD系统案例分析 简介 光波导技术凭借其平板超薄结构和强大的二维扩展能力&#xff0c;在解决AR-HUD问题方面展现出显著优势。一方面&#xff0c;其独特的结构特性能够大幅减小对光机体积的需求&#xff0c;成为 HUD 未来发展的重要技术方向&#xff1b;另一方面&#xf…...

编程日记 2025/5/31 8:58:27

火狐安装自动录制表单教程——仙盟自动化运营大衍灵机——仙盟创梦IDE

打开火狐插件页面 安装完成 使用 功能 录制浏览器操作 录入地址 开始操作 录制完成 在当今快速发展的软件开发生态中&#xff0c;自动化测试已从一种新兴技术手段&#xff0c;转变为保障软件质量与开发效率不可或缺的关键环节。其重要性体现在多个维度&#xff0c;同时&#x…...

编程日记 2025/6/1 17:42:49

线程池的详细知识(含有工厂模式)

前言 下午学习了线程池的知识。重点探究了ThreadPoolExecutor里面的各种参数的含义。我详细了解了这部分的知识。其中有一个参数涉及工厂模式&#xff0c;我将这一部分知识分享给大家~ 线程池的详细介绍(含工厂模式) 结语 分享到此结束啦。byebye~...

编程日记 2025/5/31 8:56:24

木愚科技闪亮第63届高博会 全栈式智能教育解决方案助力教学升级

5月23日&#xff0c;第63届高等教育博览会在长春东北亚国际博览中心开幕&#xff0c;木愚科技积极筹备&#xff0c;奔赴展会现场。彼时&#xff0c;木愚科技企业领导及相关职能部门负责人亲临展位指导工作&#xff0c;通过特装展位、资料发放及现场交流等方式&#xff0c;全方位…...

编程日记 2025/5/31 8:55:21

Proteus寻找元器件(常见)

一 元件库 二 找元件 1 主控 32 51 输入 stm32 AT89c51 2 找屏幕 oled 3 找按键button 4 电阻、电容 res cap 5 电机驱动 l298n 6 电机 motor 7 滑动变阻器 pot 8 找电源和 GND 9 找晶振 选择 D 开头的 CRYSTAL 10 网络标签...

编程日记 2025/5/31 8:53:19

RK3566 Android12 HG24C02MM/TR EEPROM适配

一、背景 近期项目中&#xff0c;有一个需求&#xff0c;要使用RK3566 Android12平台适配一款HG24C02MM/TR EEPROM芯片&#xff0c;通过i2c实现主板与EEPROM芯片的数据通讯。废话不多说&#xff0c;来看资料。 二、芯片资料 HG24C02 / HG24C04 / HG24C08 / HG24C16是提供2048…...

编程日记 2025/5/31 8:52:18

IoTDB 集成 DBeaver，简易操作实现时序数据清晰管理

数据结构一目了然&#xff0c;跨库分析轻松实现&#xff0c;方便 IoTDB “内部构造”管理&#xff01; 随着物联网场景对时序数据处理需求激增&#xff0c;时序数据库与数据库管理工具的集成尤为关键。作为数据资产的 “智能管家”&#xff0c;借助数据库管理工具的可视化操作界…...

编程日记 2025/5/31 8:51:17

sqli-labs第二十八关——Trick with ‘union select‘

一&#xff1a;分析 这一关的提示和上一关一样&#xff0c;所以我们查看源码&#xff0c;屏蔽了注释符&#xff0c;空格&#xff0c;union&#xff0c;select等关键词 分析这一条源码的几个新增添符号 \s&#xff1a; 匹配任何的空白字符&#xff08;普通空格&#xff0c;\t&…...

编程日记 2025/5/31 8:50:15

mapbox高阶，PMTiles介绍，MBTiles、PMTiles对比，加载PMTiles文件

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️Fill面图层样式1.4 ☘️PMTiles介绍1.5…...

编程日记 2025/5/31 8:49:13

Go语言通道如何实现通信

在Go语言中&#xff0c;通道&#xff08;channel&#xff09;是一种内置的数据结构&#xff0c;用于在不同的goroutine之间进行通信和同步。通道提供了一种安全且有效的方式来传递数据&#xff0c;避免了数据竞争和死锁等问题。 要在Go语言中使用通道进行通信&#xff0c;你需…...

编程日记 2025/5/31 8:48:10

投稿 IEEE Transactions on Knowledge and Data Engineering 注意事项

投稿 IEEE Transactions on Knowledge and Data Engineering 注意事项 要IEEE overleaf 模板私信，我直接给我自己论文，便于编辑 已经投稿完成了，有一些小坑 准备工作 注册IEEE账户：若没有IEEE账户，需前往IEEE官网注册。注册成功后，可用于登录投稿系统。现在新的系统，…...

编程日记 2025/5/31 8:47:10

题目 3316: 蓝桥杯2025年第十六届省赛真题-数组翻转

题目 3316: 蓝桥杯2025年第十六届省赛真题-数组翻转 时间限制: 3s 内存限制: 512MB 提交: 101 解决: 24 题目描述 小明生成了一个长度为 n 的正整数数组 a1, a2, . . . , an&#xff0c;他可以选择连续的一 段数 al , al1, ..., ar&#xff0c;如果其中所有数都相等即 al al1 …...

编程日记 2025/6/1 21:12:52

mongodb源码分析session接受客户端find命令过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制。 现在继续研究ASIOSession和connection是怎么接受客户端命令的&#xff1f; mongo/transport/service_state_machine.cpp核心方法有&#xf…...

编程日记 2025/5/31 8:45:04

Netty 实战篇：为自研 RPC 框架加入异步调用与 Future 支持

我们在上篇实现了一个轻量级 RPC 框架&#xff0c;现在要进一步优化 —— 加入异步响应支持&#xff0c;让 RPC 通信变得真正高效、非阻塞、支持并发。 一、为什么需要异步调用&#xff1f; 上篇的 RPC 框架是“同步阻塞”的&#xff1a; 每次发送请求后&#xff0c;必须等待服…...

编程日记 2025/6/1 17:27:08

python37天打卡

知识点回顾&#xff1a; 过拟合的判断&#xff1a;测试集和训练集同步打印指标 模型的保存和加载 仅保存权重 保存权重和模型 保存全部信息checkpoint&#xff0c;还包含训练状态 早停策略 作业&#xff1a;对信贷数据集训练后保存权重&#xff0c;加载权重后继续训练50轮&am…...

编程日记 2025/5/31 8:43:00

变焦位移计：机器视觉如何克服人工疲劳与主观影响？精准对结构安全实时监测

变焦视觉位移监测与人工监测的对比 人工监测是依靠目测检查或借助于全站仪&#xff0c;水准仪&#xff0c;RTK等便携式仪器测量得到的信息&#xff0c;但是随着整个行业的发展&#xff0c;传统的人工监测方法已经不能满足监测需求&#xff0c;从人工监测到自动化监测已是必然趋…...

编程日记 2025/5/31 8:41:59

嵌入式硬件篇---Ne555定时器

文章目录 前言1. 基本概述类型功能封装形式2. 引脚功能（DIP-8 封装）内部结构阈值电压两种工作模式4. 主要特性优点：缺点：5. 典型应用场景定时控制脉冲生成检测与触发信号处理6. 关键参数速查表前言 本文简单介绍了Ne555定时器（多谐振荡器/定时器）。DIP与SOP封装。 1. 基…...

编程日记 2025/5/31 8:40:55

【Axure结合Echarts绘制图表】

1.绘制一个矩形&#xff0c;用于之后存放图表&#xff0c;将其命名为test&#xff1a; 2.新建交互 -> 载入时 -> 打开链接&#xff1a; 3.链接到URL或文件路径&#xff1a; 4.点击fx&#xff1a; 5.输入&#xff1a; javascript: var script document.createEleme…...

编程日记 2025/5/31 8:39:52

使用web3工具结合fiscobcos网络部署调用智能合约

借助 web3 工具&#xff0c;在 FISCO BCOS 网络上高效部署与调用智能合约&#xff0c;解锁区块链开发新体验。 搭建的区块链网络需要是最新的fiscobcos3.0&#xff0c;最新的才支持web3调用 现在分享踩坑经验&#xff0c;希望大家点赞 目录 1.搭建fiscobcos节点&#xff08;3.…...

编程日记 2025/5/31 8:38:48

Oracle/openGauss中，DATE/TIMESTAMP与数字日期/字符日期比较

ORACLE 运行环境 openGauss 运行环境 0、前置知识 ORACLE&#xff1a;DUMP()函数用于返回指定表达式的数据类型、字节长度及内部存储表示的详细信息 SELECT DUMP(123) FROM DUAL; -- Typ2 Len3: 194,2,24 SELECT DUMP(123) FROM DUAL;-- Typ96 Len3: 49,50,51 -- ASCII值&am…...

编程日记 2025/5/31 8:37:45

Datatable和实体集合互转

1.使用已废弃的 JavaScriptSerializer&#xff0c;且反序列化为弱类型 ArrayList。可用但不推荐。 using System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Linq; using System.Reflection; using System.Web; using Sy…...

编程日记 2025/5/31 8:36:42

Win11切换JDK版本批处理脚本

维护的老项目jdk1.8&#xff0c;新项目开发采用jdk21&#xff0c;所以寻找类似nvm的软件&#xff0c;都不太满意&#xff0c;最后还是决定采用写一个脚本算了&#xff0c;先不折腾了。 1、创建switch_jdk.bat文件 2、把如下内容复制进行 echo off chcp 65001 >nul setloc…...

编程日记 2025/6/1 12:35:37

爬虫学习-Scrape Center spa6 超简单 JS 逆向

关卡 spa6 电影数据网站&#xff0c;无反爬&#xff0c;数据通过 Ajax 加载&#xff0c;数据接口参数加密且有时间限制&#xff0c;适合动态页面渲染爬取或 JavaScript 逆向分析。 首先抓包发现get请求的参数token有加密。 offset表示翻页&#xff0c;limit表示每一页有多少…...

编程日记 2025/5/31 8:34:37