【Android -- 写作工具】Markdown 图片
1. 前言
以下是来自 Markdown 官方对于图片的定义:
诚然,设计一种纯文本方式的语法来嵌入图片是相当困难的。
Markdown 声明图片的方式很像超链接,同样支持两种定义方式:行内定义和引用方式。
图片是比文字更容易表达多方位信息的媒介。Markdown 自然也为图片的添加提供了便捷的方法。
环境说明:
考虑到 Markdown 工具之间的不兼容,有的内容直接从页面复制粘贴到本地不会正常显示,大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
2. 语法详解
2.1 图片的行内定义
在 Markdown 文件中,使用![替换文字](图片路径)
的形式定义图片
实例 1:
#### 插入一张图片图片前的文字。![](https://img-blog.csdnimg.cn/img_convert/11c917404e3c35a209b092424b95ea12.png)图片后的文字
渲染结果如下:
图片来源于网络,版权归原作者所有
2.2 图片的全局声明
当一张图片在文章中反复出现时,可以使用全局声明的形式,减少文章编写的工作量。
实例 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 "新之助"
其渲染结果如下:
图片来源于网络,版权归原作者所有
全局的声明可以写在文章的任何地方,通常情况下,我们将它写在整篇文章的结尾处。
2.3 图片的样式
Markdown 本身没有为图片增加特殊的样式,如果我们需要特殊定义,可以通过 手动修改全局样式
实例 3:
圆形图片。
#### 使图片圆角![](https://img-blog.csdnimg.cn/img_convert/590f31abc162fbaf3109c95d20dc4cb1.png)<style>img {border-radius: 50% !important;border: 30px 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: 150px !important;height: 150px !important;border: 1px solid #EEE;
}
</style>
渲染结果如下:
图片来源于网络,版权归原作者所有
4. 小结
- Markdown 文档只能引用外部图片,无法在像 word 一样将图片嵌入到文档中,给自己找一个习惯的图床是个好方法。
- Markdown 文档里很难实现图文混排,比如文字环绕图片、图片覆盖文字这类 Word 中的效果,如果需要这样的排版,建议直接选用 Word 。
在选择图床方面,可以考虑 github、gitee 等平台,方便图片的保存和引用,也使得 Markdown 文档的传播更方便。
【Android -- 写作工具】Markdown 图片相关推荐
- 【Android -- 写作工具】Markdown 分级标题
1. 前言 关于 Markdown 的分级标题,官方给出了如下定义: Markdown 提供了两种方式声明标题: Setext 和 Atx.Setext 风格的标题定义方式为在标题文字下方增加「等号 ...
- 【Android -- 写作工具】Markdown 分割线
1. 前言 关于 Markdown 的分割线,官方给出了一下定义: 我们可以通过输入三个或更多的「减号 -」.「星号 *」.「下划线 -」的方式创建一条相当于 HTML 语法中<hr/>一 ...
- 【Android -- 写作工具】Markdown 字体字号
1. 前言 字体是丰富排版效果的主要方式.一篇文章中会通过不同的字体字号来区分文字的作用,例如使用「黑体」,「一号字」作为标题,使用「宋体」.「四号字」作为正文等. Markdown 使普通文本具有格 ...
- 【Android -- 写作工具】Markdown 表格
1. 前言 表格通常作为一种布局形式,用于结构化的数据展示. Markdown 表格包含三个部分:表头.分割线.数据. 表头 用来对列名对象进行描述,也就是通常所说的列名: 数据 用来展示每行的具体内 ...
- Android 小工具--圆形图片
1.CircleImageView类代码 public class CircleImageView extends androidx.appcompat.widget.AppCompatImageVi ...
- android 图片拼接工具,拼接图片工具app
截图拼接是一款非常好用的手机长图拼接工具,它的功能非常强大,支持图片拼接,无论是横向还是竖向拼接,一键设置,在这里小伙伴可以随时参与图片制作,帮助小伙伴制作出最佳的图片效果,操作也是很简单的,非常的方 ...
- [转载From少数派] 码字必备:18 款优秀的 Markdown 写作工具 | 2015 年度盘点
码字必备:18 款优秀的 Markdown 写作工具 | 2015 年度盘点 Codegass 2015年12月31日 47 69 现在是 2015 年底,自 2004 年 John Gruber1 ...
- 几款好用的Markdown 写作工具推荐(上)
Markdown写作工具推荐 Typora 或许是Windows平台最好用的写作应用 首先登场肯定是 Windows 平台备受好评的 Markdown 写作应用--Typora,不同于常规写作工具的双 ...
- 在 Windows 上拥有舒适的码字体验,12 款 Markdown 写作工具推荐
在 Windows 上拥有舒适的码字体验,12 款 Markdown 写作工具推荐 Eric_hong 2017年12月05日 292 46 少数派上关于写作工具的介绍已经成为热门的内容之一,ma ...
最新文章
- 记事本写python怎么运行-利用Python开发实现简单的记事本
- android长按加入购物车,《Android APP可能有的东西》之UI篇:加入购物车动画
- 托管式服务网格:多种类型计算服务统一管理的基础设施
- 2017.9.27 青蛙的约会 失败总结
- CentOS7下安装MySQL5.7安装与配置(YUM)
- JQuery模拟二------添加extend函数和简单选择器
- java opencv 打开图片路径_Java 调用 OpenCV (可获取到图像)
- 君康人寿2019年排名_2019中国保险公司竞争力报告出炉 君康人寿盈利能力排名第二...
- kali 安装chrome浏览器
- 以计算机为主题的英语作文范例,英语作文范例,一篇万能英语作文范文。
- html中设置页面正在加载,在加载Web页面时显示正在等待的窗体
- m基于PSO粒子群优化的柔性制造系统AGV调度模型matlab仿真
- 无需注册试用ChatGPT
- TensorFlow学习日记之tflearn
- dateadd函数转成oracle,oracle dateadd函数
- hadoop组件---spark----全面了解spark以及与hadoop的区别
- 001-SE-0011-网络编程
- No2-Java入门
- shell脚本中的export和PWD的作用
- Vue和React大比拼
热门文章
- 【循环链表】猴子选大王(约瑟夫问题)
- 通达信指标公式编写常用函数(六)——SUM、IF
- 安卓开发设置系统文件夹下图片为控件背景
- DST ROOT CA X3过期,浏览器https——您的连接不是私密连接
- vanish(squid) + HAProxy + nginx + memcached(redis)
- 计算机远程桌面连接有几种方式,计算机都有哪些方式能够实现远程桌面连接功能?...
- upload-labs上传漏洞记录
- 使用Vue快速开发单页应用
- 转:经典Excel VBA代码
- Linux系统配置VLAN