环境
wordpress版本:6.1.1(docker)
主题:argon 1.3.5
WP Githuber MD插件版本:1.16.1
代码高亮失效问题
其原因是wordpress根本没有加载代码高亮的js和css,所以代码高亮无效,且控制台也没有报错
但是并没有详细分析失效原因,(毕竟前端的东西不怎么会,我就是一个搞逆向的)
本着少装插件的原则,决定从根源解决问题
更新一下WP Githuber MD插件的prism目录代码高亮模块版本就好了,从原先启用的1.23.0更新到当前最新的1.29.0
更新方法是插件目录中的prism目录,位于wp-githuber-md/assets/vendor/prism,在PrismJS / prism中下载最新的版本,将文件解压复制进目录即可。
然后再修改wp-githuber-md/src/Modules/Prism.php中的$prism_version,将其改为相对应的1.29.0即可。
更新完成后,highlight和prism两个模块,都能用了,任选其一即可(真神奇。。。)
如果启用的是argon主题,需要将主题设置中的杂项中的"禁用 Argon 代码块样式"设定为禁用,否则主题的css样式将覆盖插件高亮的css样式,代码高亮将失效
目前又发现新问题了,只有新文章才会生效,旧文章就算更新也不会生效,难道要全都重新发一次吗
看了一下这个问题是由于更新文章或预览文章时插件检查post的元数据_githuber_prismjs(如果启用的是prism的话)导致的,这个元数据标记了文章中车存在那些语言类型,但是旧文章并不存在这些元数据。所以解决方案就是修改数据库,加上这个字段。
代码复制模块和argon主题冲突导致代码复制功能失效
默认情况下,代码复制模块会检索所有的pre标签,并且给其class是language-开头的标签加上个复制按钮然后注册上复制模块。
但是由于argon主题的评论输入框使用的同样是pre标签,且一般来说页面新加载评论输入框中是没有任何内容的,所以其并没有子标签。
而复制模块检索其子标签时会报错。只需要模块再减速pre标签的子标签之前检查其是否拥有子标签即可。
修改wp-githuber-md/src/Modules/Clipboard.php,找到var codeClass = pre[i].children[0].className;一行,将其改为如下一段
if (pre[i].children.length != 0) /* 排除agron主题评论区也是pre标签造成的执行出错 */
{
if (Reflect.has(pre[i].children[0],"className")) var codeClass = pre[i].children[0].className;
else continue;
}
else continue;
跳过没有子标签的pre标签即可。
注意注释需要使用/* */,而不是//,因为如果使用//,再js压缩后可能会将后面的代码一并注释掉,导致执行报错(不知道为啥压缩的时候不删掉注释。。)
当文章中存在katex公式或流程图等内容时复制按钮失效
这个问题在我看来算是个bug,之前一直没有同时开启过,今天测试了一下,发现有些问题
上文提到,复制模块会把所有class名字是language-开头的代码标签加上复制按钮
并且代码中排除掉了例如"language-katex", "language-seq"等流程图类的代码块,以便起被渲染后不出现问题
然是这种情况仅当复制模块限于公式、流程图等模块执行时时有效的。因为当公式、流程图等模块先执行后,其classname会产生变化(代码中定义的),并且其子节点也会被更改为svg等非文本格式
所以当其获取pre的子节点的classname时,会出现问题,渲染为svg的流程图并不存在classname,这就会导致其获取和检索classname的时候出现问题。
同样是wp-githuber-md/src/Modules/Clipboard.php文件,找到var isLanguage = codeClass.indexOf("language-");一行,如果codeClass不是string,这句就会发证异常。将这行改为
if (typeof codeClass === typeof("")) var isLanguage = codeClass.indexOf("language-");
else var isLanguage = -1; /* codeClass不是字符串,对应那几种流程图,直接赋值 */
即可解决问题。
至于现在网页控制台报prism-katex-xxx等等的404错误,是由于文章中标记了katex类型的代码块,但是prism不支持katex导致的。prism的autoloader无法加载不存在的语言类型脚本。
这类错误本质上是autoloader插件引入了的一个不支持的语言,不影响网页正常运行,不用理会了。
至于为什么会导致这种错误,并没有仔细研究,可能和脚本执行循序啥的都有些关系,懒得研究了。
另外目前还存在一个问题,似乎当启用了prism时,会导致mermaid失效,mermaid会报语法错误。不知道是哪里的问题,不研究了,用到了再说,有说法是prism的问题
最后如果启用了pjax,别忘了更新pjax脚本,否则脚本在页面跳转时将失效
window.pjaxLoaded = function(){
}



