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 插件工作。安装好后后在可视化面板会增加一个按钮如图：我们使用此按钮来添加高亮代码。

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

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

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

 

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

转载于:https://www.cnblogs.com/rxf_easy/archive/2010/07/05/1771738.html