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

对于pre的显示样式,咱们彻底能够自定义,免除插件的烦恼,下面给出一个参考,固然你想实现更强大的功能,建议你阅读:css

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

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

三、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编辑器 文本 模式下插入如下代码样式:wordpress

<pre>
  你须要发布的代码
</pre>post

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

 

您可能感兴趣的文章:网站


▪ 图片类Wordpress网站必备响应式灯箱插件WF Magnific Lightboxgoogle

▪ wordpress评论添加emoji表情

▪ WordPress文章复制插件 – Duplicate Post

▪ 最全最佳wordpress插件汇总推荐

▪ WordPress去掉分类连接中category目录的两种方法

▪ mod_rewrite缓存模式WP Super Cache最快的加速模式

▪ WP-Optimize你的wordpress数据库优化保姆

▪ Youpzt-optimizer插件你的WordPress网站优化利器

▪ WordPress限制上传图片的宽度长度大小

▪ wordpress代码高亮最强插件Crayon Syntax Highlighter|511碰见强烈推