WordPress代码高亮插件:WP-Syntax

重庆SEO分享:文章中代码高亮插件WP-Syntax,在WordPress网站文章中书写代码,实现和WD编程软件中显示代码一样美观。

每次在更新技术性文章的时候,少不了多多少少会有些代码出现,但是WP后台文章编辑器中书写代码,发现在文章中显示都不是很明显,而且有时候还不能直接把复制来的代码直接使用。为了解决代码能在文章正常显示,在搜索引擎中查阅大量的资料,最终选择WP的一款插件来解决我的烦恼。

代码高亮插件:WP-Syntax,不过使用不是那么完美,还需要在文章代码中加入几句代码,才能实现和编程软件显示代码的效果一样,有点麻烦不过为了用户体验也值了。以下介绍WP-Syntax代码书写格式:

<pre lang="php"  line="1" escaped="true">
//你的代码段
</pre>

其中,line为0不显示行号,为1时显示,也可以不写ling这一项;而“lang=”php””这一项中,php即语言,在添加是需要将其修改为编程语言,即为php、Java、xml等等;escaped=”true” 是为了防止代码转义,如果不需要,去掉即可。pre的属性中的值根据自己需要自己修改。

代码高亮插件WP-Syntax了解清楚了,现在就来具操作实现在文章中显示的效果。通过重庆陈江林测试有两种方法能实现该功能。

首先,讲不使用插件实现文章中代码显示,不过显示的效果就不是很美观了,具体步骤如下:

1、在文章可视化编辑代码,例如:
<pre lang=”php” line=”1″ escaped=”true”>
//……加入显示的代码……
</pre>

 

2、编辑好后选中代码,点击编辑器上方段落中——预格式化,如果是中文版WP显示的是“预格式化”,是英文版WP显示的“Pre”;

st1

 3、之后切换到文本编辑找到刚才那段代码,发现代码前后多出“pre”…代码…“pre”st4

4、在前面个“pre”加入 “lang=”php” line=”1″ escaped=”true” ”;

st3

5、添加好后预览文章就能看到效果了,之后的步骤就跟平时更新文章一样了。

st2
其次,代码+WP-Syntax插件实现文章中代码高亮,和DW软件显示的效果就一样了哟,具体步骤如下:

1、在wp后台安装WP-Syntax插件,具体插件安装我就不用介绍了,不知道的可以查完我之前写的插件安装,插件安装好后启用插件;

2、执行第一种方法1-5步骤,在文章显示代码的地方加入以上代码,预览文章就能看见效果了。

st5

Ps:在切换编辑模式的时候要注意代码是否有变动,网站优化同时以要满足用户体验,这样的SEO技术才能算上白冒SEO。

WordPress代码高亮插件:WP-Syntax》有2个想法

  1.   ……代码…… 

    经过本人测试:最好不要显示行号,显示行号会导致在移动端显示空行号,用户体验不好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注