冻葱Tewi
一个菜鸡。
冻葱Tewi
WordPress古登堡中的代码盛放问题

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

但是!!!

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

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

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

auto lambda_5 = [&](){printf("%d %d %d\n");};

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

auto lambda_5 = [&](){printf("%d %d %d\n");};

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

https://dctewi.com/wp-content/uploads/2018/08/custom-html.png
处于红色字体状态

以上,冻葱Tewi

2018/08/09

赞赏
本站采用BY-NC-SA-4.0 国际许可协议, 转载请保留出处。
https://dctewi.com/wp-content/uploads/2019/02/head-croped-small-middle-300x300.jpg

冻葱Tewi

文章作者

这个站点的蒟蒻站长~欢迎大家来晃悠!

发表评论

textsms
account_circle
email

  • https://dctewi.com/wp-content/uploads/2017/07/mys-avatar-150x150.jpg
    一位Q号被封的菜鸡(3463448740)

    冻葱大佬,很不幸,我的Q被封了,只能等解封了再跟你说,其实是菜鸡(我)又想问,Windows的ftp怎么搞啊,网站我写好了,怎么上传啊,因为我解封的那天就旅游了,电脑不在┭┮﹏┭┮!

    3月前回复
  • https://dctewi.com/wp-content/uploads/2019/02/head-croped-small-middle-150x150.jpg

    发现了在古登堡(GutenBurg)环境下兼容性更强的代码高亮——Enlighter。
    只需要把Advanced Options中的Selector改为:pre code(Block code)和code(inline code)就可以完美兼容之前的内容。crayon可以卸载了

    9月前回复
  • https://dctewi.com/wp-content/uploads/2019/02/head-croped-small-middle-150x150.jpg

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

    1年前回复
  • https://secure.gravatar.com/avatar/dc75b1021b41486d062ff0285fb94749?s=80&d=https%3A%2F%2Fdctewi.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fmys-avatar-150x150.jpg&r=x

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

    1年前回复

冻葱Tewi

WordPress古登堡中的代码盛放问题
Wordpress在他的最新更新中添加了一个崭新的编辑器——Gutenberg(古登堡)。总的来讲,在这款新编辑器中的一般体验还算不错,采用分块儿式处理,格式上的灵活性还有炫酷程度都提高了不少。…
扫描二维码继续阅读
2018-08-09
标签云
隐藏
变装