番外:Markdown 的完整图片语法

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

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

  • 思源笔记

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

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

    22025 引用 • 87847 回帖 • 3 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 武汉

推荐标签 标签

  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 60 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 663 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 7 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 164 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 534 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 31 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 126 关注
  • 架构

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

    142 引用 • 442 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    197 引用 • 547 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 452 关注
  • Windows

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

    221 引用 • 473 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 136 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    338 引用 • 705 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 541 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 151 关注
  • Notion

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

    6 引用 • 38 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • V2Ray
    1 引用 • 15 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 74 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 367 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    677 引用 • 535 回帖