WordPress古登堡中的代码盛放问题

发布于 / 站点 / 3 条评论

WordPress在他的最新更新中添加了一个崭新的编辑器——Gutenberg(古登堡)。总的来讲,在这款新编辑器中的一般体验还算不错,采用分块儿式处理,格式上的灵活性还有炫酷程度都提高了不少。用户体验也还行。

但是!!!

这玩意儿的代码高亮支持目前来说简直就跟翔一样!!!

古登堡中是有两个分别叫做“代码”和“短代码”的两个块类型的。但是这个短代码区块压根没等宽字体,而代码区块的高亮也特别迷,难以辨别出到底是什么语言的高亮而且还没办法调整。

最难受的是,我之前在用的叫做Crayon Syntax Highlighterd的一款代码高亮插件。他会把古登堡的代码块识别并且通过插件格式化显示出来(两者都是通过pre标签识别代码块的),高亮水平和美观程度不知道比古登堡高到哪里去了。但是!!古登堡会自动把形如>或者&的一些字符转化成<和&这样的html元素。这种东西在Crayon里是直接以原本的形式保存的。这就导致如果直接用代码块盛放代码的话,最后会变成这个样子:

。。。太痛苦了。经过我不断尝试,在淘汰了使用代码编辑器删减(乱的一批而且发布的时候又会自动改成html元素),使用预格式化区块(crayon不识别)等等方法之后,发现了一条生存之道:用自定义html元素区块。就像这样:

具体操作就是:添加自定义html区块之后,添加pre标签里面再套一个code标签,然后在code标签里盛放你的代码。这时那些本来会转变成html字符的字符会处于红色字体下(如下图)。此时发布的话,Crayon插件就会显示正常了。

处于红色字体状态

以上,冻葱Tewi

2018/08/09

转载原创文章请注明,转载自: 冻葱Tewi » WordPress古登堡中的代码盛放问题
  1. 青山

    太痛苦了,我用的主题不兼容新编辑器。因此我内心毫无波澜。

    1. 冻葱Tewi
      @青山 太痛苦了,每次发文章都得调半天。古登堡的代码高亮太智障了
  2. 冻葱Tewi

    好8,找到了更佳的解决办法——打开crayon设置中的解析HTML元素。
    啊,窒息。