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

Wordpress自定义pre样式DIY代码高亮,第1张

概述对于pre的显示样式,我们完全可以自定义,免除插件的烦恼,下面给出一个参考,当然你想实现更强大的功能,建议你阅读:1、强烈推荐手动安装谷歌代码高亮 google-code-prettify到wordpress2、把WP-GeSHi-Highlight

@H_301_1@ 对于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;

}

@H_301_1@ 调用方法:


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


你需要发布的代码


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

总结

以上是内存溢出为你收集整理的Wordpress自定义pre样式DIY代码高亮全部内容,希望文章能够帮你解决Wordpress自定义pre样式DIY代码高亮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/1017908.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存