番外:Markdown 的完整图片语法

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

image.png

image.png

话说回来,有接触 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 试试

image.png

在 Github 也试试

image.png

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

总结

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

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

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

image.png

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

比较下其他软件:

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

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

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • clark-cui 1 赞同 4 评论
    订阅者

    关于导出这里,我其实有一点别的想法。因为笔记本身并不是完全意义上的 md,是有一些增强语法在里面的,比如双链,导出的时候,还是想带上一些知识的链接关系,比如图谱。如果只是单纯意义的导出 md 的话,要不就记录的时候不写增强语法,要不就导出的时候用脚本过滤下,这样都舍弃了许多。
    而且维护笔记和博客两套,属实有点费力....一开始折腾的挺爽,越到后面越麻烦。我两年前弄的 hexo 博客,弄了许多个性化的定制,推到了我的服务器里,当时为了导出方便还做了个镜像包存在阿里云。后面换了电脑,服务器也过期了,迁移的时候特别痛苦,所以就干脆不迁移了,把内容拿下来,从新弄了个 vuepress 的博客,到现在,感觉快要舍弃他了,本地编译很慢,又试了 vitepress,直到最近不弄了,因为我的备案问题,老是被公安局打电话...烦死了,现在不想弄了。

    我想了想,对我来说,结合笔记的场景下,最轻松的方式,就是笔记导出的时候,不只是导出 md,而是把代码包一起导出来,我每次只需要把代码包 push 到 github 仓库,github 弄个 action 自动推送到静态托管平台,一气呵成。打开的静态页面,就是思源的 web 页面,不过里面是我的笔记,不可编辑。我再把域名绑定过去,也免去了备案的麻烦。笔记---博客,是一个完整的工作流,双链,图谱都有。

    不过这种与其说是博客,不如说是公开笔记。我的设想下,弄个个人站,分几个类,放在子域名下。博客是一类,属于不常更新的一种,但是要有点个性,平时更新的主要是代码,记录就直接 vscode 写就是了。公开笔记是一类,经常更新,用笔记软件记录,用笔记本来的样式就好,保持笔记本来的样子。或许还可以加别的类
    clark-cui
    @clark-cui 我目前的 github.io 其实搞了两个分支,主分支就是源码,次分支才是 public 文件夹。 这样更新笔记也能用 git 管理
    Achuan-2
    @clark-cui hexo 博客目前我自我感觉良好,思源写文章后直接粘贴过去就好,还是有必要维护一个属于自己的博客的,整理自己觉得有意思的笔记出来 。
    Achuan-2
    @clark-cui 可能我觉得笔记和博客还是要区分开,笔记是写给自己看的,言简意赅,自己明白意思就好,或者背后有复杂的引用关系。博客是公开文章,是提炼,两者区分开好些 。一个是背后,一个是人前
    Achuan-2