使用WordPress后台编辑器编辑文章时,常常需要插入程序代码,如何使插入的代码直观,易读呢?代码高亮显示是种不错的方法。在可视化设计模式下直接插入高亮代码而无需切换到HTML模式下,该如何操作呢?通过本教程,您会发现插入高亮代码是如此简单,又可随意切换可视化和HTML设计器。
首先我们需要安装两个插件wp-syntax和wp-syntax button。如果不会安装可以查看小风草堂的教程wordPress如何安装插件、主题。
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选项中填写起始数字即可。点击插入完成操作。
预览文章,代码显示是不是很酷哦。
<?php echo "小风草堂www.cnitman.com";?>
切换到HTML编辑器下看看,再切换到可视化编辑器下,预览文章,代码显示没有变化,酷。