wordpress可视化设计器下插入高亮代码方法

 

使用WordPress后台编辑器编辑文章时,常常需要插入程序代码,如何使插入的代码直观,易读呢?代码高亮显示是种不错的方法。在可视化设计模式下直接插入高亮代码而无需切换到HTML模式下,该如何操作呢?通过本教程,您会发现插入高亮代码是如此简单,又可随意切换可视化和HTML设计器。

首先我们需要安装两个插件wp-syntax和wp-syntax button。如果不会安装可以查看小风草堂的教程wordPress如何安装插件、主题

1、wp-syntax:相关介绍     下载地址

2、wp-syntax button:相关介绍   下载地址

3、wp-syntax插件安装好后,我们要在文章中插入高亮代码,只能在HTML编辑器下操作,此时不能在可视化编辑器下直接操作,因为此插件并没有提供可视化的操作按钮。注意在HTML下操作好后,一定不要在可视化和HTML下相切换操作。否则添加的高亮代码会丢失或出错。

4、不能切换操作,真的很不爽。再者将来不小心或者忘记了,切换到可视化下操作了,高亮代码失效了,我们还要修改,岂不是很麻烦。。。。。

5、小风草堂经过查找,找到了解决此问题的好方法:使用wp-syntax button插件。首先安装Wp-syntax插件,再安装wp-syntax button插件。wp-syntax button插件需要依靠wp-syntax 插件工作。安装好后后在可视化面板会增加一个按钮如图:wp-syntax-code按钮我们使用此按钮来添加高亮代码。

6、使用方法。例如在可视化编辑器下,我们在文章中插入代码<?php echo "小风草堂www.cnitman.com";?>,选中此代码后点击code按钮,在弹出的对话框wp-syntax-弹出框中选择相应的代码语言即可,如果要在代码前显示数字序号,只需要在弹出框Line选项中填写起始数字即可。点击插入完成操作。
预览文章,代码显示是不是很酷哦。

2
<?php echo "小风草堂www.cnitman.com";?>

切换到HTML编辑器下看看,再切换到可视化编辑器下,预览文章,代码显示没有变化,酷。

 

原文出处:可视化设计器下插入高亮代码方法

posted @ 2010-07-05 22:39  cnitman.com  阅读(788)  评论(0编辑  收藏  举报