前言
想发布已经写好的 Markdown 文档, 需要手动调整的地方只有图片. 原因是默认插入的图片太大的话, 图片会占满屏幕, 导致浏览不便.
个人体验: 常见的横屏情况下, 一张图片不宜超过 2/3 屏幕高度, 主体内容不宜超过 2/3 屏幕宽度, 这样浏览起来最顺心.
本地笔记编辑使用的是 VNote, 是本人经过很长一段时间的查询, 筛选与试用, 比较喜欢且稳定使用的一款 Markdown 编辑软件. 使用起来比其他的更加得心应手, 兼具速度, 颜值以及自定义功能.
由于本地图片的插入, 在 VNote 的. md 文档内是这样一段文本, 直接复制到网上的话需要重新进行处理.
![](_v_images/20190906211935038_10173.PNG =460x)
要想完全跟本地笔记显示的样式一样, 还是需要花费一番时间, 过程挺折腾的.
过程
博客园后台有三种编辑器可选: TinyMCE,Markdown,TextBox, 个人理解如下.
TextBox 跟 Windows 自带的记事本一样, 最最精简 (功能最少), 不考虑.
TinyMCE 类似 Word, 富文本编辑器, 功能最多 (按钮也多).
此编辑器下, 可以对插入的图片手动调整大小, 但不精确. 不过可以进入 html 源码编辑器, 搜索 PNG, 在 alt=""后面插入 width="500".
此方法是可以实现问题需求的, 但是需要先一张张找到图片的位置, 再每一串图片代码后面都得加上后续的高宽.
就算用正则表达式其实也需要繁琐的几步, 想到后续发文每次都得这样的话, 还不累死, 此方法也 pass.
Markdown 不用多说了, 互联网使用最多不敢说, 但应该是现在最为推崇的一种码字写文方式, 用内容控制样式.
方便程度介于前两者之间, 其实对我来说有时候还是比较麻烦的, ahk 的简化输入帮了很大的忙.
目前还没有找到在博客园的 Markdown 编辑器内修改图片宽度的方法.
例如下图第一三四行这样的写法, 图片无法正常显示, 第二行的图片可以正常显示.
解决
寻求问题解决办法, 搜索引擎. 主要参考了这个问题下的回答, 五花八门, 在博客园编辑器试了下.
Markdown 中插入图片怎么定义图片的大小或比例? https://www.zhihu.com/question/23378396
嵌入 HTML 代码, 使用 img 标签, 加上 width = "300", 或者 width = "80%" .
<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />
已经属于 HTML 的属性了, 能修改. 其实 Markdown 内也有效, 但不是原生的, 总感觉不太好.
实在没办法的话, 就用它吧, 需要将 Markdown 的![]() 标签转化为 HTML 的 img 标签.
当然是得批量处理, 正则表达式出手, 除了!,[]() 都需要用 \ 进行转义.
方括号跟圆括号在 Markdown 里面也需要转义, 上面偷懒直接代码表示了, 实际得输入对应的 ASCII 码 http://www.w3chtml.com/html/ref/ascii.html .
查找
^!\[\]\((.*cnblogs.com/blog/.*)\)
, 替换
- <img src="$1" width="500" />
- .
对比一下, 第一行是默认上传后的, 第二张是处理后的.
![](http://image.bubuko.com/info/201911/20191106095319644095.png)
<img src="http://image.bubuko.com/info/201911/20191106095319644095.png" width = "500" />
此方法好处在于能够精确修改每一张图片的大小, 配合 Quicker 的快捷操作一点都不麻烦, 最优解.
使用支持图片大小更改操作的 Mou 编辑器, 加上 = 100x100.
![](./pic/pic1_50.PNG =100x100)
此方法在本地能生效, 按理来说是最有希望的, 但是在博客园的 Markdown 编辑器内失效.
在图片后面加上对应的 CSS 样式, 加上 {:height="100px" width="400px"}.
![test image size](url){:height="100px" width="400px"}
在博客园的 Markdown 编辑器内无效, 经查询是 kramdown 中 InlineAttribute 的特性.
找一个支持参数的图床, 比如七牛, 具体参见图片基本处理 (imageView2)
http://siwangxinyuan.qiniudn.com/jianshu-42-1280x800-[DesktopNexus.com].jpg?imageView/2/w/619/q/90
非特殊需求, 博客园发文就不用图床外链了, 不好管理, 而且直接复制图片更方便.
mweb 编辑器, 加上 - w 数字, 数字为缩放大小.
![知乎头像 - w70](https://pic3.zhimg.com/v2-0a80d2f61233518a3719179a045c41b2_xl.jpg)
此种方法应该是知乎的 Markdown 编辑器支持. 不过博客园的测试了下, 果然不行.
直接修改 CSS 文件, 添加图片样式, 再在 Markdown 内应用.
img[src*="#width-full"] { width: 100%; } ![trump.jpg](https://view.moezx.cc/images/2018/05/27/trump.jpg#width-full)
可以添加几种常用的样式, 对图片进行操作, 除了高宽, 其他 CSS 样式也可以应用.
直接修改 CSS 文件, 对图片的最大宽度进行限制.
img { max-width: 80%; }
此方法应该是次优解, 避免部分图片默认尺寸过大同时不影响其他图片大小. 完善之后, 能够一劳永逸~
拓展
完整版. Markdown 语法说明 (简体中文版) http://wowubuntu.com/markdown/index.html
到目前为止, Markdown 还没有办法指定图片的宽高, 如果你需要的话, 你可以使用普通的 标签.
原来在保存的这篇 MD 语法中, 已经说明了这个问题. 个人觉得算是 Markdown 本身的一个瑕疵吧, 毕竟这个问题能原生解决的话, 对于纯 MD 文档的写作已经预览效果都是更好的.
而且对于像我这种强迫症来说, 这个问题 MD 不解决, 有点小遗憾, 希望原生也能支持修改图片高宽样式.
挖坑
在以上尝试过程中, 新问题冒出来了: Mou 编辑器, mweb 编辑器, kramdown 是什么, 与 Markdown 有什么联系与区别?
再多一点的问题, 各类文本编辑器与其渲染效果, 有哪些坑? 有没有像浏览器与渲染样式那种测评表格?(想法太多了, 别打我 (;≧皿≦))
来源: http://www.bubuko.com/infodetail-3274676.html