WordPress插件:SyntaxHighlighter实现代码高亮

  • A+
所属分类:随笔分享
摘要

熟悉wordpress的人应该都用过代码高亮插件,这样可以很方便的在文章中插入代码,而不会显示实际效果或者错误之类。而代码高亮的插件也很多,像wp-syntax、syntaxhighlighter等。

熟悉wordpress的人应该都用过代码高亮插件,这样可以很方便的在文章中插入代码,而不会显示实际效果或者错误之类。而代码高亮的插件也很多,像WP-SyntaxSyntaxHighlighter等等。之前我也介绍过利用WLW发布文章时可以利用WLW的插件来实现代码的输入:WLW插件:CodeSnippet在文章中插入代码源码框不过经过几次的使用,发现其有bug,会无故失效,并且显示的效果也有点难看,这个可能和我使用的主题有关。所以后来还是选择直接在wordpress后台编辑,安装代码高亮插件就是了。

刚开始看到网上很多人介绍wp-syntax,而且一看评论和下载量,都是非常之高。所以我也折腾了下,安装激活之后,发现的确是能实现代码高亮,而且还可以分行,但是多了很多引号以及多个方框,折腾了半天也没捣鼓出问题出现在哪,只能解释为与主题不协调了,当然最后只好放弃使用了。后来又找了半天,终于发现还有这么一款:SyntaxHighlighter。虽然网上介绍它的人不多,不过我看到其实也有很多人用,因为除了高亮代码外,它还有个小工具栏,包括“查看源代码”、“复制代码”、“打印”、“帮助”等功能,也正是因为有这个,我才找到了它。

这也就是我今天所要推荐的插件:SyntaxHighlighter。

安装:去wordpress官方网站下载:http://wordpress.org/extend/plugins/syntaxhighlighter/,或者去作者网站:http://alexgorbatchev.com/wiki/SyntaxHighlighter,然后上传、激活便可。

使用:编辑文章时,选择HTML模式下,插入[ code]代码内容[ /code],这样就可以简单实现了。(演示时在code有个空格,真正使用时不要空格)。比如我插入我的google adsense代码,只要输入:[ code]
[ /code],显示的结果:
[code]<script type="text/javascript"><!--
google_ad_client = "pub-1542009170519644";
/* 468x15, 创建于 10-5-16 */
google_ad_slot = "2192312214";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>[/code]

当然其实这只是实现了代码的输入,并没有起到高亮的效果,我们可以添加语言[ code lang="php"]代码[ /code](lang为语言种类,支持php,html,java,css等多种常用与不常用的语言)或者直接插入[ php]代码[ /php]即可,再次输入上面的代码,则显示如下:
[php]<script type="text/javascript"><!--
google_ad_client = "pub-1542009170519644";
/* 468x15, 创建于 10-5-16 */
google_ad_slot = "2192312214";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>[/php]

简单易懂吧,更多详细设置可以看后台的syntaxhighlighter设置,赶紧试试看吧。(再次提醒,演示时在code或php前有空格,实际操作时要去掉。)

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:32   其中:访客  31   博主  0

    • homely live homely live 0

      很好 很强大 在用了 主要是用了之后 复制代码的效果太方便了

      • 求索阁 求索阁 3

        那WordPress自带的那个html模式下的code标签,起啥作用?貌似不起作用吧

          • admin admin 9

            @求索阁 那个 :?: 没用过 应该是不行 要不也不会有这么多插件出现了 个人感觉这款插件还不错 设置也挺多的 可以根据自己的喜好及方便用户

          • guobaa guobaa 0

            这个插件,==我试试!