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

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

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

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

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

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

  1. /**pre**/
  2. pre {
  3. 	margin:20px auto;
  4. 	padding:20px;
  5. 	background-color:#aea8a8;/*根据自己需要修改背景底色颜色*/
  6. 	white-space:pre-wrap;
  7. 	word-wrap:break-word;
  8. 	letter-spacing:0;
  9. 	font:14px/26px 'courier new';
  10. 	position:relative;
  11. 	border-radius:3px;
  12. }

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

<pre>
  你需要发布的代码
</pre>

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


发布日期:

所属分类: Wordpress 综合 标签: