wordpress代码高亮是什么意思
一直以来在wordpress发布文章的时候不管代码的显示格式,都是按普通的文章本格式来发布的,但后来发现这样的发布使得代码非常之不美观,又不方便阅读,这样对用户的体验非常不好,所以在网上找了一些解决代码在文章中高亮显示的方法,经过几次的测试,觉得使用CodeColorer这个插件来实现比较方便,而且高亮代码显示非常美观,下面给大家讲讲如何使用这个插件。
1、既然是用插件为实现的功能,那么第一件事就是安装这个插件了,详细的安装方法可以参照:wordpress插件CodeColorer的下载与安装2、安装好CodeColorer后在wordpress管理后台的设置里面有个CodeColorer选项,点击进去进行配置,一般情况下只需要将“宽度”设置成您站点文章的宽度就行了。如果希望显示的高亮代码前面显示行号的话,可以勾选一下格式化里的“显示行号”。
如图:3、在发表文章的时候先在可视化界面编辑好所有文字内容,然后切换到文本界面,在文本界面找到你需要添加高亮代码的地方插入以下标签:,在标签之间插入您需要显示的代码,然后保存文章就可以了。当然您也可以开启CodeColorer的可视化插入代码功能,只需要修改插件目录下的codecolorer.php文件即可。
下面是需要修改的代码,只需要将代码前面的//注释符去掉就可以了。
WordPress文章如何插入高亮代码
切换到文本界面,在文本界面找到你需要添加高亮代码的地方插入以下标签:
,在
标签之间插入需要显示的代码,然后保存文章就可以了。
当然您也可以开启CodeColorer的可视化插入代码功能,只需要修改插件目录下的codecolorer.php 文件即可。 下面是需要修改的代码,只需要将代码前面的//注释符去掉就可以了。
// if (get_user_option('rich_editing') == 'true') {// add_filter('mce_external_plugins', array('CodeColorerLoader', 'AddTinyMCEPlugin'));// add_filter('mce_buttons', array('CodeColorerLoader', 'RegisterTinyMCEButton'));// }。
wordpress代码高亮用什么插件
WordPress有很多的代码高亮插件,但是效果和使用都不是很理想,后来也就找到了一款WP-Syntax的插件,感觉还是非常不错的。
但是由于WP-Syntax插件的默认样式有些怪异,所以可以使用一下css做一个美化 /* wp_syntax update:2016/04/12*/.wp_syntax { color:#100; background-color:#f9f9f9; border:1px solid #EBEBEB; margin:6px 0; overflow:auto;}.wp_syntax { overflow-x:auto; overflow-y:hidden; padding-bottom:expression(this.scrollWidth > this.offsetWidth ? 15:0); width:99%;}.wp_syntax table { border:none; border-collapse:collapse; margin:0; padding:0; width:100% !important}.wp_syntax caption { padding:2px; width:100%; background-color:#def; text-align:left; font-family:Monaco; font-size:13px; line-height:20px;}.wp_syntax caption a { color:#1982d1; text-align:left; font-family:Monaco; font-size:13px; line-height:20px; text-decoration:none;}.wp_syntax caption a:hover { color:#1982d1; text-decoration:underline;}.wp_syntax div,.wp_syntax td { border:none; text-align:left; padding:0; vertical-align:top;}.wp_syntax td.code { background:none; line-height:normal; white-space:normal; padding-left:10px;}.wp_syntax pre,.wp_syntax span { background:transparent; margin:0; padding:0; width:auto; float:none; clear:none; overflow:visible; font-family:Monaco; font-size:13px; line-height:26px; white-space:pre; font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;}.wp_syntax td.line_numbers { width:36px}.wp_syntax td.line_numbers pre { border-right:3px solid #666; background-color:#E7E5DC; color:gray; padding:0 5px; text-align:right;}你也可以将上面的代码添加到你主题的 style.css 文件中,然后在 functions.php 中添加下面的代码,取消 WP-Syntax 加载的css文件,这样,即使你以后升级了插件,也能保留你自己的样式。 if ( has_action( 'wp_print_styles', 'wp_syntax_style' ) ) {remove_action( 'wp_print_styles', 'wp_syntax_style' );};这样就非常的好了。
以上代码参考资料:https://zhangzifan.com/wp-syntax.html (版权归原作者所有)
如何利用wordpress插件在文章中插入高亮代码
1、既然是用插件为实现的功能,那么第一件事就是安装这个插件了 2、安装好CodeColorer后在wordpress管理后台的设置里面有个CodeColorer选项,点击进去进行配置, 一般情况下只需要将“宽度”设置成您站点文章的宽度就行了。如果希望显示的高亮代码前面显示行号 的话,可以勾选一下格式化里的“显示行号”。
3、在发表文章的时候先在可视化界面编辑好所有文字内容,然后切换到文本界面,在文本界面找到你需要添加高亮代码的地方插入以下标签:
,在
标签之间插入您需要显示的代码,然后保存文章就可以了。当然您也可以开启CodeColorer的可视化插入代码功能,只需要修改插件目录下的codecolorer.php 文件即可。
下面是需要修改的代码,只需要将代码前面的//注释符去掉就可以了。
转载请注明出处51数据库 » wordpress非插件代码高亮