轻松记录您
灵感和创意

MarkDown内如何调整图片的尺寸及对齐方式?

想发布已经写好的MarkDown文档,需要手动调整的地方只有图片。原因是默认插入的图片太大的话,图片会占满屏幕,导致浏览不便。

个人体验:常见的横屏情况下,一张图片不宜超过2/3屏幕高度,主体内容不宜超过2/3屏幕宽度,这样浏览起来最顺心。

本地笔记编辑使用的是VNote,是本人经过很长一段时间的查询、筛选与试用,比较喜欢且稳定使用的一款Markdown编辑软件。使用起来比其他的更加得心应手,兼具速度、颜值以及自定义功能。

由于本地图片的插入,在VNote的.md文档内是这样一段文本,直接复制到网上的话需要重新进行处理。

要想完全跟本地笔记显示的样式一样,还是需要花费一番时间,过程挺折腾的。

过程

博客园后台有三种编辑器可选:TinyMCE、Markdown、TextBox,个人理解如下。

TextBox 跟Windows自带的记事本一样,最最精简(功能最少),不考虑。

TinyMCE 类似word,富文本编辑器,功能最多(按钮也多)。

此编辑器下,可以对插入的图片手动调整大小,但不精确。不过可以进入HTML源码编辑器,搜索png,在alt=”” 后面插入 width=“500”。

此方法是可以实现问题需求的,但是需要先一张张找到图片的位置,再每一串图片代码后面都得加上后续的高宽。

就算用正则表达式其实也需要繁琐的几步,想到后续发文每次都得这样的话,还不累死,此方法也pass。

MarkDown 不用多说了,互联网使用最多不敢说,但应该是现在最为推崇的一种码字写文方式,用内容控制样式。

方便程度介于前两者之间,其实对我来说有时候还是比较麻烦的,ahk的简化输入帮了很大的忙。

目前还没有找到在博客园的MarkDown编辑器内修改图片宽度的方法。

例如下图第一三四行这样的写法,图片无法正常显示,第二行的图片可以正常显示。

解决

寻求问题解决办法,搜索引擎。主要参考了这个问题下的回答,五花八门,在博客园编辑器试了下。

Markdown中插入图片怎么定义图片的大小或比例?

1.嵌入HTML代码,使用img标签,加上width = “300”,或者width = “80%” 。

已经属于HTML的属性了,能修改。其实MarkDown内也有效,但不是原生的,总感觉不太好。

实在没办法的话,就用它吧,需要将MarkDown的![]()标签转化为HTML的img标签。

当然是得批量处理,正则表达式出手,除了!,[]()都需要用\进行转义。

方括号跟圆括号在Markdown里面也需要转义,上面偷懒直接代码表示了,实际得输入对应的ASCII码。

查找^!\[\]\((.*cnblogs.com/blog/.*)\),换。

对比一下,第一行是默认上传后的,第二张是处理后的。

此方法好处在于能够精确修改每一张图片的大小,配合Quicker的快捷操作一点都不麻烦,最优解。

2.使用支持图片大小更改操作的 Mou 编辑器,加上=100×100。

此方法在本地能生效,按理来说是最有希望的,但是在博客园的MarkDown编辑器内失效。

3.在图片后面加上对应的CSS样式,加上{:height=“100px” width=“400px”}。

在博客园的MarkDown编辑器内无效,经查询是kramdown中InlineAttribute的特性。

4.找一个支持参数的图床,比如七牛,具体参见图片基本处理 (imageView2)

非特殊需求,各自平台发文就不用图床外链了,不好管理,而且直接复制图片更方便。

5.mweb编辑器,加上-w数字,数字为缩放大小。

此种方法应该是知乎的MarkDown编辑器支持。不过博客园的测试了下,果然不行。

6.直接修改css文件,添加图片样式,再在MarkDown内应用。

可以添加几种常用的样式,对图片进行操作,除了高宽,其他css样式也可以应用。

7.直接修改css文件,对图片的最大宽度进行限制。

此方法应该是次优解,避免部分图片默认尺寸过大同时不影响其他图片大小。完善之后,能够一劳永逸~

8.图片链接后面加上#pic_center =30×30调整图片的格式。

粘贴图片就能转成MarkDown的图片标签,还支持尺寸及对齐方式的修改。没错,就是CSDN的MarkDown编辑器啦。

另一个贴心的小细节是,剪切板的图片插入上传后,在编辑界面就能预览图片,而且会「自动选中MarkDown图片标签的说明区域」。方便插图后加入对图片的说明,而不用先将光标定位到[ ]中间,再删去文字,再填写说明。

未经允许不得转载:坚果云Markdown编辑器 » MarkDown内如何调整图片的尺寸及对齐方式?
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍