您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Markdown 图片

1. 前言

以下是来自 Markdown 官方对于的定义:

诚然,设计一种纯文本方式的语法来嵌入是相当困难的。

Markdown 声明的方式很像超,同样两种定义方式:行内定义和引用方式。
原文出处: 。

是比更容易表达多方位信息的媒介。Markdown 自然也为的提供了便捷的。

环境说明
考虑到 Markdown 工具之不兼容,有的直接从复制粘贴到本地不会正常,大家学习时自己动手写是肯定没问题的。本节所有实例及演示均使用 Typora 工具完成。
本节所有渲染后截图均为 Typora 导出成 HTML 后的。

2. 语法详解

在 Markdown 中,使用 ![替换](路径 "(可选)") 的形式定义

实例 1:

#### 插入一张前的。

![](https://tva3.sinaimg.cn/crop.0.0.180.180.180/6d04a77djw1e8qgp5bmzyj2050050aa8.jpg?KID=imgbed,tva&Expires=1588529780&ssig=vNCcwnltm2)

后的

渲染结果如下:


该源码渲染 html 的如下:

<h4>插入一张</h4><p>前的。</p><p><img src="https://c-ssl.duitang.com/uploads/item/201905/03/20190503105835_VfkU3.thumb.1000_0.png" referrerpolicy="no-referrer"></p><p>后的。</p>

当一张在中反复出现时,可以使用全局声明的形式,减少编写的工作量。

实例 2

#### 使用全局声明方式插入![][img1]
![][img2]
![][img1]
![][img2][img1]: https://hbfile.huabanimg.com/img/weekly/74/topic/3624245/49465709_sq120 "麦兜兜"[img2]: https://hbfile.huabanimg.com/img/weekly/74/topic/3624245/49464585_sq120 "新之助"

其渲染结果如下:


全局的声明可以写在的任何地方,通常情况下,我们将它写在整篇的结尾处。

Markdown 本身没有为特殊的样式,如果我们需要特殊定义,可以通过 手动全局样式 <style> 实现。

实例 3

圆形。

#### 使圆角![](https://c-ssl.duitang.com/uploads/item/201905/03/20190503105835_VfkU3.thumb.1000_0.png)<style>
  img {border-radius:  !important;border: px solid #eee;
  }</style>

其渲染结果如下:


3. 使用场景及应用实例

是文档中最长出现的媒体,是用来表达的最好载体之一。一篇通常可以头部的封面图、尾部的签名图等。

实例 4

做类似预览的。

#### 拼图九宫格![][img6]
![][img5]
![][img4]

![][img3]
![][img2]
![][img1]

![][img9]
![][img8]
![][img7][img1]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101433_eTTNZ.thumb.300_300_c.jpeg[img2]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101434_iWadw.thumb.300_300_c.jpeg[img3]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101434_Z3JVy.thumb.300_300_c.jpeg[img4]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101435_NiLkv.thumb.300_300_c.jpeg[img5]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101437_CxzYm.thumb.300_300_c.jpeg[img6]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101437_wdizF.thumb.300_300_c.jpeg[img7]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101438_J8vff.thumb.300_300_c.jpeg[img8]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101439_cVcLx.thumb.300_300_c.jpeg[img9]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101439_yhUv3.thumb.300_300_c.jpeg<style>img {width: px !important;height: px !important;border: px solid #EEE;}</style>

渲染结果如下:


4. 小结

Markdown 文档只能引用外部,无法在像 word 一样将嵌入到文档中,给自己找习惯的图床是个好。

Markdown 文档里很难实现图文混排,比如环绕、覆盖这类 Word 中的,如果需要这样的排版,建议直接选用 Word 。

在选择图床方面,可以考虑 github、gitee 等平台,方便的保存和引用,也使得 Markdown 文档的传播更方便。


联系我
置顶