Loading
0

WordPress主题专用代码高亮插件 io code highlight自定义去掉宽度滚动条

公众号搜索菜鸟站长之家

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

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

WordPress主题专用代码高亮插件 io code highlight自定义去掉宽度滚动条-菜鸟站长之家

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

WordPress主题专用代码高亮插件 io code highlight自定义去掉宽度滚动条-菜鸟站长之家

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

WordPress主题专用代码高亮插件 io code highlight自定义去掉宽度滚动条-菜鸟站长之家WordPress主题专用代码高亮插件 io code highlight自定义去掉宽度滚动条-菜鸟站长之家

默认是白色的,如果要黑色,请加入下面的css代码到prism.css里,以后再加设置,本站自用。

 

.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)}

去掉宽度滚动条:

在prism.css里的第112行下面加入:

white-space: pre-wrap;
word-wrap: break-word;

下载地址:

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系菜鸟站长之家小编,或者自行点击 投稿
4、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
5、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。
6、如遇下载地址失效,请留言告知或者联系客服获取。