Markdown 的图片插入语法 ![]() 也应该用于插入音频和视频

陪她去流浪桃子 2025年09月01日阅读次数：138

Markdown 原生的 ![alt](url) 语法只支持图片插入，音频和视频是无能为力的。只能纯手写 HTML，比如：

<video src="1.mp4"></video>；
<audio src="2.mp3"></audio>。

但是大部分平台以及个人网站应该是不能手写 HTML 的。所以，看似这么简单的需求竟然难以实现。

我以前的做法是根据文件后缀来不精确地获取文件类型，然后插入不同的标签：

1
2
3
4
5
6
7
8
9


if (/^image\//.test(f.type)) {
	return `![](${pathEncoded})\n`;
} else if (/^video\//.test(f.type)) {
	return `<video controls src="${_escapeAttribute(pathEncoded)}"></video>\n`;
} else if (/^audio\//.test(f.type)) {
	return `<audio controls src="${_escapeAttribute(pathEncoded)}"></audio>\n`;
} else {
	return `[${f.path}](${pathEncoded})\n`;
}

之所以能这样做，大概是因为我的文章附件（图片、音视频、文件等）都是以原始文件名存储和访问的，且都是非常简单的相对路径，几乎都能从后缀名推断出文件类型。而且，即便有重定向，也是先访问简单路径后重定向到云存储的¹，这已经是浏览器侧的工作，早已不是渲染阶段。

我觉得这样的固定写法没有收益，也不方便后期对已有的文章变更渲染方法。

所以我现在已经在我自己的网站上统一了图片、音频和视频的插入方式²：

![](1.jpg)
![](2.mp3)
![](3.mp4)

后端在渲染的时候自动通过路径后缀来决定渲染方式。

真好用，现在已经支持了更多的类型：

用 name.table 的方法插入一个外部表格
用 name.drawio 的方法插入一张 draw.io 的绘图