番外:Markdown 的完整图片语法

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

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

  • 思源笔记

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

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

    28444 引用 • 119764 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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://mp.weixin.qq.com/s/_NrGwjJnEta0oT5a6EKdiA 知乎:https://www.zhihu.com/column/c_1922583788405359964 武汉

推荐标签 标签

  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • OneDrive
    2 引用 • 3 关注
  • Access
    1 引用 • 3 回帖 • 14 关注
  • TGIF

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

    293 引用 • 4496 回帖 • 688 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    119 引用 • 54 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    146 引用 • 442 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 174 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • Outlook
    1 引用 • 5 回帖
  • 面试

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

    327 引用 • 1395 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 72 关注
  • 前端

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

    248 引用 • 1342 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    110 引用 • 153 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 3 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    213 引用 • 2044 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 249 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 740 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖 • 1 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 724 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 5 关注