这可能是一个比较小众的需求,也不知道有没有人需要。
我先描述下目前 Typora 导出 HTML 的情况,源文件是这样的
导出后的 html 文件我们打开后检查这个引用的图片地址,可以看到其引用的地址还是本地的文件路径:
那么这样存在一个问题:
对于引用的本地图片,这个 html 文件你最多在本机上看看,如果图片文件路径有变化,那这个 html 文件里相应图片也会失效。更别说把 html 文件发给别人,其并不能看到图片。
那么如果引用的网络图片呢?就有可能某一天失效了。
当然,你可以设置 Typora 自动复制图片功能(见下图),自己本地查看还是可以用用的,但是如果发给别人,需要将素材文件夹和 HTML 文件一起发送,还是挺麻烦的。
那么我就产生了一个想法,利用 HTML img 标签的 Data URLs 语法,将图片嵌入到 markdown 里面 (markdown 可以用 img 标签),这样就可以做到真正可便携的单文件 HTML了。
无独有偶,github 上也有人给 typora 提了类似的意见,大概意思是,在Typora中插入图片时,自动编码图片为 base64。Typora 回复说是这样嵌入了二进制数据违背了 Markdown 作为纯文本文件的初衷,拒绝了这个提议。我觉得还是挺有道理的,哈哈,而且 markdown 一大优势就是可读性高,那如果里面多了大片大片的 base64 编码的字符,那确实很不好。
那么,最后我给的方案是什么呢,我花了一些空余(摸鱼)时间,写了个小工具 compact_html.exe,利用 Typora 导出后运行自定义命令的功能,把 HTML 文件里的图片引用全替换成了Data URLs形式,也就说将图片数据嵌入到了 html 文件里了,这样也不影响源文件作为纯文本的纯粹性:
上图中自定义命令是 "D:\Temp\compact_html.exe" "${outputPath}"
生成了一个后缀名为 compact.html 的文件,下图:
打开后可以看到引用的图片从本地(网络同样)变成了 base64 编码的数据。
有 -h
参数可以查看帮助信息:
有一个 output html file
的可选参数,用来设置嵌入图片后的html文件输出路径,默认为 xxxx.compact.html。利用此参数,如果你想要就地更新源 html 文件,不生成新文件,自定义命令可以这样写:"D:\Temp\compact_html.exe" "${outputPath}" "${outputPath}"
算是提高了导出的 html 文件的可用性吧,这个小工具名字叫 compact_html.exe,1.1M,C++写的,单文件无依赖,其实这程序挺适合学生用来练手的…晚几天开源,写这贴写完太晚了。
另外只支持64位,windows 10以下的系统没测过。
再提一句,对浏览器保存的网页使用这个工具效果不大,推荐浏览器 singlefile 插件,可以处理所有外链资源(除了图片外还有css, 字体等),而compact_html.exe只能处理外链图片。哈哈,如果不是 singlefile 不能处理离线文件我就不用写这个工具了。
下载地址(v1.1):
- 百度网盘 提取码:
4qmi
- github releases
- 阿里云盘
源代码:GitHub - EdenHell/compact_html: Embed image data directly to HTML files.
目前发现了一个bug ,如果导出时选择的目标目录不是markdown文件所在目录,无法工作。可以将命令换成 <— 已经修复,请重新下载新版本程序。"D:\Temp\compact_html.exe" "${outputPath}"
,这样除非插入的本地图片的路径是相对路径,还是可以正常工作的。这些问题在后续版本修复。
其它: