加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > CMS系统 > wordpress > 正文

Wordpress自定义pre样式DIY代码高亮

发布时间:2020-12-14 14:34:49 所属栏目:wordpress 来源:网络整理
导读:对于pre的显示样式,我们完全可以自定义,免除插件的烦恼,下面给出一个参考,当然你想实现更强大的功能,建议你阅读: 1、强烈推荐手动安装谷歌代码高亮 google-code-prettify到wordpress 2、把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器 3、

对于pre的显示样式,我们完全可以自定义,免除插件的烦恼,下面给出一个参考,当然你想实现更强大的功能,建议你阅读:

1、强烈推荐手动安装谷歌代码高亮 google-code-prettify到wordpress

2、把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器

3、WordPress代码高亮插件 WP-GeSHi-Highlight

将以下css样式添加到你主题的style.css中,你完全根据你的爱好,调整css样式,

/**pre**/

pre {

margin:20px auto;

padding:20px;

background-color:#aea8a8;/*根据自己需要修改背景底色颜色*/

white-space:pre-wrap;

word-wrap:break-word;

letter-spacing:0;

font:14px/26px 'courier new';

position:relative;

border-radius:3px;

}

调用方法:


wordpress编辑器 文本 模式下插入以下代码样式:


你需要发布的代码


本站的代码高亮就是使用了自定义的css样式。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读