Markdown笔记中增加SVG支持
目录

平时使用Markdown记笔记,格式简单,检索方便, 最主要原因就是Markdown就是纯文本文件,几十年后我还可以读这些笔记,便于长期保存。

后来博客增加了Markdown解析功能,把Markdown文件直接解析成HTML来显示。 再后来增加了公式解析功能,使用MathJax.js解析和显示LaTeX数学公式。 抱着持续优化和碰到问题再解决问题的思路, 现在需要解决一个新的问题,就是图片显示问题。

原生Markdown支持插入图片链接![]()。 但是我目前使用MS OneDrive作为图床,原始的文件名和图片链接路径是随机映射关系, 导致如果微软的服务关闭,我将很难批量修改之前的图片链接路径。 如果图片保存在vps上,会有存储空间和流量两个问题。 而且我认为图片也应该属于笔记内容的一部分,应该是一个笔记保存成一个文件,这样更便于维护和统计,而不是分散到若干个目录下。

因此在google了一番之后,选择了这样的方案:dot language => SVG。 dot是一个面向矢量图像的描述性语言,可用于画有向图和流程图。 而SVG可以直接在Firefox、Chrome、IE9+上直接显示矢量图像。 因此我在笔记中使用dot画图,然后在浏览器端使用viz.js把dot语言解析成SVG格式,可直接显示。比如下面示例:

digraph G {
bgcolor=transparent;

input -> split;
split -> text;
split -> code;
text -> smartypants;
smartypants -> markdown;
code -> dotview;
code -> other;
markdown -> merge;
dotview -> merge;
other -> merge;
merge -> result;
}

可以转换成:

G input input split split input->split text text split->text code code split->code smartypants smartypants text->smartypants dotview dotview code->dotview other other code->other markdown markdown smartypants->markdown merge merge markdown->merge dotview->merge other->merge result result merge->result

当然可以在服务端把dot转换成SVG之后发送到客户端,我这也是为了减少服务端压力。 现在基本可以使用了,不过仍然有几个问题有待解决:

  1. viz.js很大,有2MB+,现在挂在github上下载也不快,第一次访问需要等待的时间比较长,目前使用seajs按需异步加载viz.js;
  2. SVG背景颜色是白色的,不能设置为透明;增加bgcolor=transparent声明;
  3. SVG图片显示大小的设置;
  4. 照片这样的图片还是需要链接插入;

以上

发表评论