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

对于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样式。

相关文章

我们有时候在定制WORDPRESS主题的时候,由于菜单样式的要求我...
很多朋友在做wordpree主题制作的时候会经常遇到一个问题,那...
wordpress后台的模块很多,但并不是每个都经常用到。介绍几段...
从WordPress4.2版本开始,如果我们在MYSQL5.1版本数据中导出...
很多网友会遇到这样一个问题,就是WordPress网站上传图片、附...
对于经常要在文章中出现代码的IT相关博客,安装一个代码高亮...