LuRenJiasWorld / WP-Editor.md

或许这是一个WordPress中最好,最完美的Markdown编辑器
https://wordpress.org/plugins/wp-editormd/
GNU General Public License v3.0
744 stars 87 forks source link

[BUG] 代码块单行内容过长引发的显示异常 #560

Open martincz opened 2 years ago

martincz commented 2 years ago

BUG描述 | Describe the bug 代码块单行内容过长不能保持原样显示

复现方法 | To Reproduce 发布单行内容较长的代码块,例如:

1 root@server:~# docker ps
2 CONTAINER ID   IMAGE                          COMMAND                  CREATED         STATUS         PORTS                                                                                  NAMES
3 0e31a16ce293   portainer/portainer-ce:latest  "/portainer"             1 minutes ago   Up 1 minutes   0.0.0.0:8000->8000/tcp, :::8000->8000/tcp, 0.0.0.0:9000->9000/tcp, :::9000->9000/tcp   portainer

期望行为 | Expected behavior 保持原样显示并显示横向滚动条

截图 | Screenshots 错误的显示效果: image 期望的显示效果: image

调试信息 | D wp-editormd-debug-info ebugging info

其他内容 | Additional context 经本人探索,此问题出现在WordPress 5.6版本之后,由以下样式引发。

.wp-block-code code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

我目前的临时解决方案:

  1. 修改插件 src/App/WPMarkdownParser.php 源码第 424 行 $classes = array(); 修改为 $classes = array('wp-block-code');
  2. WordPress 控制面板 - 外观 - 自定义 - 额外CSS 中添加
    code.wp-block-code {
    white-space: pre;
    }
  3. 编辑受影响的文章,无需做任何修改直接保存即可。
  4. https://blog.mokeedev.com/2022/05/619/ 这里有一个改动前后的实际效果示例

难题交给作者,希望大佬能给出更妥善的解决方案^ - ^

LuRenJiasWorld commented 1 year ago

你好,感谢你的建议,抱歉这两年难以抽身,现在终于有时间开始下一个版本的开发了。 如果有时间的话,你可以提交一个 Pull Request 吗?

LuRenJiasWorld commented 1 year ago

你好,我详细看了一下,这里的问题是未指定代码高亮语言时,插件没有注入优先级更高的 CSS 样式,导致 WordPress 自带的样式被应用到了代码块里。

一般情况下 pre > code 的优先级为:插件->主题->默认,如果插件没有指定、主题也没有指定样式,那么就会兜底到 WordPress 这里来。

我会尝试在未指定代码高亮语言时,注入一个默认的 CSS 样式,避免在主题没有指定样式时回落到默认样式。

LuRenJiasWorld commented 1 year ago

另外我发现了 WordPress 新版本的另一个问题:在启用任何编辑器(不管是块状编辑器、传统编辑器还是自定义编辑器)的情况下都会加载块状编辑器样式,这个 BUG 也是块状编辑器样式强制加载导致的。

我也尝试一下在本插件启用的情况下禁止块状编辑器加载样式,这样既可以提升性能,也可以避免类似问题发生。