番外：Markdown 的完整图片语法

Hexo 博客总算改了图片注释的 js，现在复制思源笔记的内容到 Hexo，原来在本地笔记显示的图片标题，也可以正确在博客中显示了，舒服了。

话说回来，有接触 Markdown 的人，肯定知道 Markdown 怎么插入图片，但是你八成记的是错误且不完整的语法。

如果去网上搜 Markdown 的教程，大部分人都会告诉你 Markdown 插入图片的语法是 ![alt 属性文本](图片地址)，你也就一直相信这种说法。如果你有使用 Typora、VSCode 当 Markdown 编辑器，用不了多久就会发现，这个图片语法中方括号内的文字除了在源码模式告诉你这个图片是什么内容外，在渲染的时候就完完全全隐藏了。而你真正想要的，可能是这个图片注释渲染的时候也能在图片正下方。如果你去网上搜 Markdown 如何在图片下居中显示文字，你可能会使用 <center>text</center> 的语法来达成目的，然后在心里暗骂，为什么 Markdown 就不能简单点的加图片的说明！

其实 Markdown 图片语法里的 alt 属性文本，真的就只是用于源码模式还有图片未成功加载时告诉你这个图片的是干什么用的，本来就不是用于渲染的。如果你有接触 HTML （或者你没接触也不要紧，你只要知道 Markdown 就是 HTML 的简化版，Markdown 是通过渲染为 HTML 来展示样式的），这个 alt 属性文本就和 <img> 标签的 alt 属性作用一模一样。而 <img> 标签其实还有一个属性——title。这个 title 才是图片的标题，能正常显示在渲染结果中的，但默认是你鼠标悬浮于图片时才显示这段文字。

那 Markdown 有没有 title 属性呢？有的，比如菜鸟教程的 Markdown 教程里就明确告诉你 Markdown 的 title 语法就是放在圆括号里面，用英文引号包裹。

不信？在 Typora 粘贴一张图片，并加上 title 试试

在 Github 也试试

其实我上面几张图片也加了 title，在链滴也是鼠标悬浮显示图片标题的

总结

Markdown 的完整图片语法是 ![anchor text](img_src "title")

• anchor text 用于源码模式和图片未成功加载提示图片用途
• img_src 是图片地址，可以是本地的也可以是网络图床
• title 是图片标题，默认是鼠标悬浮显示

如果你问为什么这俩就不能合并，非要分开，那就不关我事了，问这语法的发明人吧

说到这里就得表扬下思源笔记了，图片注释非常方便，右击图片就可以直接输入图片标题，默认居中显示

而语法就是用的 title，导出 md 也能完整保留语法，这样我粘贴到 Hexo 博客去，就能完整保留样式，不需要动了。

比较下其他软件：

• Typora 前面已经展示过了只能鼠标悬浮展示图片标题，加图片说明需要 HTML 语法
• wolai 虽然支持图片说明，但图片说明是默认居左的，这点和 notion 一样……（这点也要抄？）貌似不支持导出
• Ob 没深入使用过，只知道默认不安装插件下是没法加图片说明的

更不用提思源的本地图床和网络图床共存的图床解决方案。思源未必是最佳笔记软件最佳写作软件，但无疑是我心目的最佳文章发布软件~

可以看看我的博客效果：纠误：Markdown 的完整图片语法 | Achuan-2