番外:Markdown 的完整图片语法

本贴最后更新于 915 天前,其中的信息可能已经时移俗易

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")

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

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

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

image.png

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

比较下其他软件:

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

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

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

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18534 引用 • 68920 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
Achuan-2
给时间以生命而不是给生命以时间,思源笔记使用分享 https://www.yuque.com/achuan-2/siyuan 武汉

推荐标签 标签

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 29 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 636 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 3 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 151 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    185 引用 • 318 回帖 • 348 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 10 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    172 引用 • 990 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 103 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    284 引用 • 4481 回帖 • 655 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 532 回帖 • 710 关注
  • 分享

    有什么新发现就分享给大家吧!

    242 引用 • 1746 回帖 • 2 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    534 引用 • 672 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖 • 2 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 438 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    40 引用 • 40 回帖
  • 安装

    你若安好,便是晴天。

    128 引用 • 1184 回帖
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 189 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    85 引用 • 1201 回帖 • 455 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    215 引用 • 462 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 175 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6485 引用 • 29158 回帖 • 248 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注