掘金Markdown编辑器问题描述

1,085 阅读4分钟

掘金Markdown编辑器问题描述

2021年8月25日时,我想在掘金发布自己的第一篇博客,然而,在使用掘金Markdown时遇到了几个不方便的地方,在此做一下记录。

注意:以下提到的问题是截止至2021年8月25日11:08:16所遇到的,后续掘金官方可能会对其Markdown编辑器做相关方面的改进和功能增加。

当时我还发布了一个相关【沸点】:

参考:【优化】吐槽掘金Markdown编辑器 - 掘金

我针对这其中的几个问题写的小脚本:

更新:2021年9月3日20:26:04

相关博客:油猴脚本——掘金Markdown格式适配器知识点记录 - 掘金
脚本地址:掘金Markdown格式适配器

1、如何居中图片或文字

我此前看到的居中方案就是用<center></center>标签,设置字体都是用<font></font>标签(不过这两个标签好像都在MDN文档里被标示为不建议使用),typora里倒是支持设置style属性,但是CSDN和掘金的Markdown编辑器好像都不能应用style属性。

解决方案:(感谢字节2021青训营工作人员 @梁*芝 的解答)

使用 <div align="center">xxxx</div>

<div align="center"><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/271e674b224341509876caa2eeb210c0~tplv-k3u1fbpfcp-watermark.image"></div>

例如:

<div align="center"><img width="240px" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1773706239424d03bf5226cd9764a04a~tplv-k3u1fbpfcp-zoom-1.image"/></div><div align="center" color="gray">图片居中效果(掘金的等级提示,看我眼里的光~)</div>

显示效果:


图片居中效果(掘金的等级提示,看我眼里的光~)

<div align="center">xxxx</div> 这种方式可以解决CSDN、掘金、typora的居中问题。

希望官方能出一个让我们非常方便地设置图片居中和设置图片大小的方案,比如CSDN就是通过在图片链接后加相关参数来实现的:

CSDN官方示例

【更新:2021年9月2日15:18:19】如果想要在掘金的Markdown编辑器中设置图片大小,则可以通过设置 img 标签的 widthheight 属性。(注意不是通过 style 属性来设置哦)这种方式可以解决CSDN、掘金、typora设置图片大小的问题。

<img width="240px" src="https://i.loli.net/2021/08/30/rBO1VhTgoeHusGQ.png"/>

2、无法使用 ==xxx== 的方式高亮文本

掘金Markdown编辑器中的效果typora和CSDN编辑器中的效果(想要的效果)
image-20210825112003943

image-20210825112146619
image-20210825112146619

解决方案:

统一使用<mark></mark>标签(但未免不够方便吧……)。

推荐一个正则表达式在线工具:

参考:正则表达式在线测试 | 菜鸟工具

3、粘贴过去的代码块中的代码有时不能自动换行(格式错乱)

有时把typora中的代码内容粘贴到掘金编辑器中,有些代码块中的代码就无法自动换行而挤在一行里。就像这样:

image-20210825112810215

而原本的格式(预期效果)是这样的:

image-20210825112919383

我是在一次性从typora中粘贴大量内容到掘金编辑器中的情况下遇到这个问题的,其中,前面几个代码块都是按预期正常显示,但是靠后的代码块就普遍出现了这种情况。初步猜测是一次性粘贴大量内容导致解析出问题的(还不是因为官方不支持直接导入Markdown文件,我才只能全选再复制粘贴的嘛……)。

解决方案:

目前只能期待官方出一个从导入Markdown文件的功能,或者自己手动重新复制粘贴格式错乱的代码块。

【更新:2021年8月30日19:50:54】经过几次试验,我发现,如果直接从本地Markdown编辑器的预览模式全选内容再复制粘贴到掘金Markdown编辑器中的话会有几率出现这个问题,但是如果从源码模式复制粘贴的话就没有出现这个问题。

4、无法设置文字样式(字体、大小、颜色)

无法通过 font 标签设置文字样式(种类、大小、背景色、前景色)。(虽说这个标签被MDN官方建议不用了,但是在写Markdown时却感觉非常好用,奈何掘金编辑器不支持……)。不过万幸的是,如果你用了 font 标签,也不会造成什么影响,只是有些属性不会解析罢了。

5、无法使用 <kbd> 标签

这个好像确实是没办法了,不支持就是不支持,得看官方怎么弄了。

【更新:2021年8月30日20:09:43】突然发现掘金Markdown编辑器是支持解析 <kbd> 标签的,就是显示效果不好,只是字体有了点变化,并没有预期中的边框效果。