WebStack

WordPress 代码高亮插件 io code highlight

 7个月前 (04-08)     1.8K  
文章目录

WordPress 代码高亮插件,支持经典编辑器和古腾堡代码块,捣鼓 webstack 导航主题整的,本来是集成到主题里的,后来想想,单独弄个插件吧,就弄了个插件 :lol: 分享一下,是 prism.js 的方案。

使用

经典编辑器,没什么好说的,看下图 :roll:

WordPress 代码高亮插件 io code highlight

古腾堡区块编辑器,看图。

WordPress 代码高亮插件 io code highlight

安装

  • 上传 io-code-highlight目录 到 /wp-content/plugins/ 目录
  • 激活插件,没有设置项,激活就能用。

效果

WordPress 代码高亮插件 io code highlight WordPress 代码高亮插件 io code highlight

默认是白色的,如果要黑色,请加入下面的css代码,以后再加设置 :mrgreen:

.ioch-code-highlight{background-color:#151619;border:0}
:not(pre) > code[class*="language-"],.io-black-mode pre[class*="language-"]{background-color:rgba(0,0,0,.15)}
.ioch-code-highlight .io-btn-copy{border:1px solid rgba(255,255,255,.5)}

就这么多了,完。。。

下载

下载信息 资源名称:io code highlight 应用平台:WordPress 资源版本:1.0 文件下载:156 次 下载地址
版权声明:一为 发表于 7个月前 (04-08),共 495 字。
转载请注明:WordPress 代码高亮插件 io code highlight | 一为忆

17 条评论

  • avatar

    古哥 ( VIP 1 )

    回复

    复制成功会提示[Violation] ‘click’ handler took 2815ms
    我的jquery版本是1.12.4,是不是这个的问题呢

  • avatar

    y ( VIP 2 )

    回复

    老大,请问前端文章里显示的代码不会换行是什么原因?确定是有换行的,文章编辑里边显示也是一行一行的,前端文章里显示只有一行,显示很长。不会分行。

  • avatar

    Action ( VIP 1 )

    回复

    这个插件真的很棒,就是使用后,上面标题栏不显示语言类型,而且代码块和装饰块之间发生了小幅错位,导致上方的三个点和复制按钮都没有垂直居中对齐。我使用的是经典编辑器,不知道是不是兼容性的问题?

  • avatar

    婉言如歌 ( VIP 1 )

    回复

    站长,这个好像不支持php7.1,并且用php7.4启用插件后,代码背景是黑色,外框是白色,不知道是不是只有我这样。

  • avatar

    y ( VIP 2 )

    回复

    就比如你的会显示“PHP”“HTML”,我的只会显示“MARKUP”

  • avatar

    y ( VIP 2 )

    回复

    老大,你的截图顶部会显示语言类型,我的代码区域顶部不会显示语言类型,都显示的是“MARKUP”,是什么问题呀?请指教下。

  • avatar
    回复

    老大,博客为什么没有RSS

  • avatar

    Oliver ( VIP 1 )

    回复

    大佬我想买你导航主题呀,都找不到人

  • avatar

    锟斤拷锟斤拷锟斤拷锟斤拷-锟秸帮拷锟斤拷 ( VIP 1 )

    回复

    老大你失联了啊

2020/5/1 12:50
通勤一个月,劳动节继续加班! 详情