首页 > 挨踢(IT) > WordPress代码高亮插件SyntaxHighlighter终极使用详解

WordPress代码高亮插件SyntaxHighlighter终极使用详解

2012年9月29日 发表评论 阅读评论 15,471 人阅读    

   子曰: 工欲善其事,必先利其器。作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用、操作简单、而且功能必须强大、样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命的码农,把代码整的漂漂亮亮是一件多么神圣和伟大的事情啊!

  今天就给大家推荐一款这样的代码高亮插件:SyntaxHighlighter Evolved。相信我, 功这款插件能强足够大、并且简单易用,绝对值得推荐。本站就是用的这款插件,大家可以看看“生病的JavaScript代码”,这就是最好的例子。

插件介绍

插件名称:SyntaxHighlighter Evolved

插件作者:Viper007Bond, automattic

作者主页:http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

插件类型:代码高亮

中文支持:支持

安装环境:WordPress2.7或以上版本,经过我自己的测试,在3.3和3.4上都可以正常运行

下载地址:点击这里下载最新版

  SyntaxHighlighter Evolved基于开源的JS核心库:SyntaxHighlighter JavaScript package by Alex Gorbatchev二次开发扩展的。安装后只需简单设置一下,不用修改任何代码即可达到很好的效果。

功能特效

  说起SyntaxHighlighter Evolved的特效,忍不住要“炫耀”一下。不说不足以让你感受到SyntaxHighlighter Evolved的强悍功能。SyntaxHighlighter Evolved的功能特效如下:

  1. 代码高亮
  2. 支持Eclips、Emacs等多种样式,可搭配不同风格的主题
  3. 特色——显示工具条。右上角显示工具条,可以”查看源代码”、”复制源代码”、”打印源代码”。(只有第2版支持)
  4. 显示行号
  5. 长代码自动换行(只有第2版支持)
  6. 可以点击代码中的超文本链接
  7. 可以收缩代码框
  8. 高亮显示模式—某一行高亮
  9. 设置开始行号
  10. 自定义样式

特效演示

  只要做Web应用的,无论是JSP,还是PHP,甚至ASP.NET,都会用JavaScript代码。所以,就是用JavaScript代码来演示SyntaxHighlighter的功能吧。要实现的功能是计算第N个斐波纳契数列(Fibonacci Sequence)数列的值。同时,我们要求文件名显示为:FibonacciSequence.js;代码的第二行高亮显示。则实例如下:

function fib(n) {
    return n<2 ? n : fib(n-1) + fib(n-2);
}

  怎么样,你是不是已经被SyntaxHighlighter强大功能震撼了?也许你已经好奇,这是如何实现的?我们接下来就介绍SyntaxHighlighter的使用方法。

安装方法

  只需要在后台插件里搜索“SyntaxHighlighter Evolved”之后点击安装,启用即可。

使用方法

  使用方法很简单。在发布文章时,在“HTML”编辑模式下(注意:不是CKEditor等富文本编辑模式;防止让这些富文本编辑器把代码转义了。),使用如下代码,把需要展示的代码包含起来即可:(注意:把前面的@符号去掉。)

  1. [@java]这里写你的代码[/java]
  2. [@css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]这里写你的代码[/css]
  3. [@code lang="js"]这里写你的代码[/code]
  4. [@sourcecode language="plain"]这里写你的代码[/sourcecode]
  5. 推荐使用这种方式。这种使用方式,见"最佳实践"

  其实,在网上,搜“SyntaxHighlighter 使用方法”就会出现一堆结果,里面大多时对于这些使用方法的罗列。很少去讲解这些配置项的意思和说明。下面,我将针对这些配置进行详细说明。同时,针对这些配置的使用,我总结了SyntaxHighlighter使用方法的最佳实践。如果急于知道结果,可以直接查看“最佳实践”

配置详解

代码样式配置
表-1-SyntaxHighlighter配置参数表
简码 默认值 含义说明 V2支持 V3支持
lang 说明代码块是哪种语言? 支持 支持
autolinks true Toggle automatic URL linking. 是否自动将网址转换为链接。 默认转换。可以后台管理页面修改默认值。 示例:点击查看 支持 支持
classname Add an additional CSS class to the code box. 允许你添加一个或多个自定义的样式。 默认没有。可以后台管理页面修改默认值。示例:点击查看 支持 支持
collapse   Toggle collapsing the code box by default, requiring a click to expand it. Good for large code posts. 是否默认折叠代码段。如果折叠,这需要一个“点击”操作,才能展开。非常适合有大段代码的文章。默认不折叠。可以后台管理页面修改默认值。 示例:点击查看 支持 支持
firstline 1 An interger specifying what number the first line should be (for the line numbering). 设置起始行的行号。示例:点击查看 支持 支持
gutter   Toggle the left-side line numbering. 是否显示行号。默认显示。可以后台管理页面修改默认值。 示例:点击查看 支持 支持
highlight A comma-sperated list of line numbers to highlight. You can also specify a range. Example: 2,5-10,12 需要高亮显示并使用逗号分隔的行号。同时,也支持区间(开始行号-结束行号)。例如:2,5-10,12。 示例:点击查看 支持 支持
htmlscript   Toggle highlighting any extra HTML/XML. Good for when you're mixing HTML/XML with another language, such as having PHP inside an HTML web page. The above preview has it enabled for example. This only works with certain languages. 是否高亮显示功能任何额外的HTML / XML。特别适合混合HTML/XML与另一种语言混合的情况下。如在HTML代码中含有部分PHP代码。注意,这仅仅适用于特定的语言。示例:点击查看 支持 支持
light false  Toggle light mode which disables the gutter and toolbar all at once. 是否显示高亮模式。默认是关闭。可以后台管理页面修改默认值。    
padlinenumbers off Controls line number padding. 设置行号的格式化,前面是否补零。默认是关闭。可以后台管理页面修改默认值。 支持 支持
title Sets some text to show up before the code. 设置文本的标题。默认没有。可以后台管理页面修改默认值。 不支持 支持
toolbar false  Toggle the toolbar (buttons in v2, the about question mark in v3) 默认不显示。可以后台管理页面修改默认值。 示例:点击查看 支持 不支持
wraplines false Toggle line wrapping. 是否开启自动换行。可以后台管理页面修改默认值。 支持 不支持
smarttabs true Allows you to turn smart tabs feature on and off. Click here for a demo.智能制表符 支持 不支持
tabsize 4 Allows you to adjust tab size. Click here for a demo.制表符的长度。 支持 不支持

 

颜色主题

  目前IT行业中,常用的语言有几十种;使用的开发环境也多种多样,比如开发Java的也许用Eclipse的比较多;但是在Linux下做C/C++开发的也许用Emacs等。见过这些开发环境的人都知道,这些开发环境的高亮模式、颜色等都是不一样的。习惯了Eclipse的人很难适应Emacs;反之亦然。SyntaxHighlighter考虑的很周全,她在内部直接继承了大概其中这样的颜色主题来供大家选择。大家可以在后台的管理页面轻松的选择自己喜欢的“颜色主题”来进行显示。“颜色主题”列表如下:(排名部分前后。呵呵)

  • Default
  • Django
  • Eclipse
  • Emacs
  • Fade to Grey
  • Midnight
  • RDark
  • None
语言别名

  从事IT行业的朋友也许都知道,由于历史等原因,一个语言可能有好几个名字。比如JavaScript,微软山寨了个JScript;后来经过ECMA标准化之后,名字又称了ECMAScript;我们大家平时还简称成JS。这就给我们在使用SyntaxHighlighter的语言代号时,造成了一定的困难:不知道到底该用哪个名字才是“正确”的。

  其实,这点SyntaxHighlighter也考虑到了。她通过“语言别名”的方式很好的解决了这个问题。

表-2-SyntaxHighlighter中“语言别名”和“语言代码”对应表
语言别名 语言代码 说明
as3 as3 不知道是否支持AS2?
actionscript3 as3
bash bash 竟然还支持Shell.
shell bash
coldfusion coldfusion
cf coldfusion
clojure clojure
clj clojure
cpp cpp
c cpp
c-sharp csharp
csharp csharp
css css
delphi delphi 看来Delphi和Pascal确实有一腿啊!
pas delphi
pascal delphi
diff diff
patch diff
erl erlang
erlang erlang
fsharp fsharp
groovy groovy
java java
jfx javafx
javafx javafx
js jscript 从这里可以看出,针对JavaScript的代码,写js行,写javascript行,甚至是微软的jscript都行。
jscript jscript
javascript jscript
latex latex Not used as a shortcode
tex latex
matlab matlabkey
objc objc
obj-c objc
perl perl
pl perl
php php
plain plain
text plain
ps powershell
powershell powershell
py python
python python
r r Not used as a shortcode
splus r
rails ruby 针对Ruby的。
rb ruby
ror ruby
ruby ruby
scala scala
sql sql
vb vb
vbnet vb
xml xml 针对XML、HTML以及XHTML等,其实都是按照XML来处理的
xhtml xml
xslt xml
html xml
xhtml xml

  从这个表中,我们也可以看出SyntaxHighlighter支持的编程语言多达二十五种语言:AppleScript、 ActionScript、 Bash、 ColdFusion、 C /C++、 C#、 CSS、 Delphi、 Diff(不知道这是不是一种编程语言)、 Erlang、 Groovy、 Java、 JavaFX、 JavaScript、 Perl、 PHP、 PowerShell、 Python、 Ruby、 Sass、 Scala、 SQL、 VB、 XML。

最佳实践

  经过配置的讲解,我们可以明白,SyntaxHighlighter已经遵循了软件工程中的最佳实践“约定大于配置”。其实,我们并不需要过多地去设定SyntaxHighlighter的配置,只需要设定一些“实在没办法约定”的配置项即可。比如:title、highlight等。另外,经过我自己的实际测试,我还发现了第五种使用方法,其实,我们可以在[代码名称]这个标签中,添加刚刚讲到的配置配置项。当然,lang就没必要了。因为这里已经通过“标签名”指定过了。综上所述,SyntaxHighlighter使用方法的最佳实践如下:(下面以Java代码为例)

  [@java title="自定义的文件名" highlight="高亮的行"] 这里写你的代码 [/java]

  有时,我们并不需要一定有高亮强调的行,这是highlight就可以省略掉。另外,如果你需要自定义样式,可以添加class属性。不过,我个人觉得必要性不大。

特效扩展

  1. 设置背景样式
  2. 大家在 "生病的JavaScript代码" 也许会发现高亮部分的背景颜色比较深,也许有一些人看着不舒服(我个人就觉得颜色有点深)。也许就有人想修改高亮行的背景色。这是,就可以通过修改插件自带的CSS文件,来实现自定义样式的功能。

    在线操作方式是:登录Wordpress后台管理页面,插件-编辑-选择SyntaxHighlighter-选择syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.css-找到

    .syntaxhighlighter .line.highlighted.alt1,
    .syntaxhighlighter .line.highlighted.alt2
    {
        background-color: #e0e0e0 !important;
    }
    

    将其修改为:

    .syntaxhighlighter .line.highlighted.alt1,
    .syntaxhighlighter .line.highlighted.alt2
    {
        background-color: #6CE26C !important;
    }
    

    重起见,D瓜哥不建议做这个修改。如果以后修改“颜色主题”可能会带来一点的不良影响。

  3. 实现圆角和阴影
  4. SyntaxHighlighter的“容器”样式是一个方方正正。也许不如圆角、立体阴影效果漂亮。这个效果也很容易实现。只需要修改syntaxhighlighter的样式即可;不过,这个修改是在主题的style.css文件做的。修改方式如下:将以下代码添加到主题的style.css文件里面:

    .syntaxhighlighter{
         padding: 10px 0 !important;
         box-shadow: 1px 1px 3px #ccc;
        -webkit-box-shadow: 1px 1px 3px #ccc;
        -moz-box-shadow: 1px 1px 3px #ccc;
        border-radius: 5px;
       -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
     }
    

参考资料:



作 者: D瓜哥,https://www.diguage.com/
原文链接:https://wordpress.diguage.com/archives/59.html
版权声明:非特殊声明均为本站原创作品,转载时请注明作者和原文链接。

分类: 挨踢(IT) 标签: , ,
  1. 2013年6月8日10:25 | #1

    很想知道你的文章中点击关键词就跳转到关键词内容的这个是怎么实现的

  2. 灯塔
    2014年2月9日22:15 | #2

    为什么我在wordpress中在html下写代码,然后转到文本模式下就全乱了呢?

    • 2014年2月22日11:28 | #3

      这是什么情况?我关注你微博了,可以给我私信。发给我,让我看看。(但是,水平有限,不保证一定解决问题啊。哈哈)

  3. 2014年5月10日10:51 | #4

    这个怎么分成下一行啊,我全部代码都挤成一行了,可以帮忙看看吗?http://aceyi.cn/wordpress/2506

    • 2014年5月10日22:01 | #5

      你要现在你的代码编辑器里分好行,然后再粘贴过来。这样才行。否则就会挤成一行。

  4. 2014年5月10日10:53 | #6

    还有你表格的样式,是用插件做的吗??怎么做的啊,求指教、

    • 2014年5月10日22:02 | #7

      表格是我写了一句JS代码。你右键查看源代码就能看到的。哈哈

      • 2014年5月11日09:46 | #8

        不好意思,技术确实很水,看不懂,可以直接指出吗?

        • 2014年5月11日10:21 | #9

          就是下面这行JavaScript代码:$(document).ready(function(){$(“tr:even”).css(“background-color”, “#E9EEF4″);});(注:我的主题里已经引入了jQuery代码。如果没有则需要在这行代码之前引入jQuery代码,否则不生效,而且还会报错,影响其他JavaScript代码!)

  5. 2014年5月11日13:56 | #10

    那相关jQuery代码,会很复杂的吗???

    • 2014年5月11日16:39 | #11

      我在上面的回复中已经贴出来了啊,就是上面第二行。

  6. 2015年1月24日15:28 | #12

    不知道为什么无法使用

  7. 2015年7月6日15:22 | #13

    SyntaxHighter无法解析pre标签代码放在了pre标签里面原样输出了pre标签,无法高亮代码~求解~

  8. 2015年8月31日05:22 | #14

    路过看一下!

  9. 2015年9月2日04:48 | #15

    本人在此留言并不代表本人同意、支持或者反对文章观点;

  10. 2015年9月12日11:50 | #16

    过来支持一下 值得收藏分享

  11. 2017年6月17日20:03 | #17

    看了下,挺好的,但是我的有时候显示不了要显示的代码

  12. 2016年3月30日10:45 | #18

    写两个按标签,上边的只写href属性,第二个只写name属性。并且这两个属性值必须一致。

  1. 2012年10月18日00:33 | #1
  2. 2013年4月5日09:36 | #2
  3. 2013年4月6日15:25 | #3
  4. 2013年5月21日15:11 | #4
  5. 2013年6月5日10:07 | #5
  6. 2013年8月31日13:53 | #6
  7. 2013年9月8日18:18 | #7
  8. 2013年9月21日21:14 | #8
  9. 2013年10月8日22:23 | #9
  10. 2013年12月19日14:14 | #10
  11. 2014年4月2日19:08 | #11
  12. 2014年5月19日10:51 | #12
  13. 2014年8月5日14:56 | #13
  14. 2014年12月30日22:32 | #14
  15. 2015年6月15日13:50 | #15
  16. 2016年10月30日10:44 | #16