Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
martincz opened this issue May 14, 2022 · 3 comments
Open

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

martincz opened this issue May 14, 2022 · 3 comments

Comments

@martincz
Copy link

martincz commented May 14, 2022

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;
}
  1. 编辑受影响的文章,无需做任何修改直接保存即可。
  2. https://blog.mokeedev.com/2022/05/619/ 这里有一个改动前后的实际效果示例

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

@LuRenJiasWorld
Copy link
Owner

LuRenJiasWorld commented Mar 8, 2023

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

@LuRenJiasWorld LuRenJiasWorld added this to the Version 10.2.2 milestone Mar 8, 2023
@LuRenJiasWorld
Copy link
Owner

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

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

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

@LuRenJiasWorld
Copy link
Owner

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants