TAG

RSS订阅

收藏本站

设为首页

当前位置:主页 > 建站巴士 > 建站系统 >

WordPress代码高亮插件SyntaxHighlighter

发布时间:2016-02-28 21:14 类别:建站系统

推荐一款这样的代码高亮插件:SyntaxHighlighter Evolved。相信我, 功这款插件能强足够大、并且简单易用,绝对值得推荐。本站就是用的这款插件,大家可以看看“生病的JavaScript代码”,这就是最好的例子。
插件介绍
插件名称:SyntaxHighlighter Evolved
插件作者:Viper007Bond, automattic
插件类型:代码高亮
中文支持:支持
安装环境: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;代码的第二行高亮显示。则实例如下:
1
function fib(n) {
2
    return n<2 ? n : fib(n-1) + fib(n-2);
3
}
  怎么样,你是不是已经被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属性。不过,我个人觉得必要性不大。
特效扩展
大家在 "生病的JavaScript代码" 也许会发现高亮部分的背景颜色比较深,也许有一些人看着不舒服(我个人就觉得颜色有点深)。也许就有人想修改高亮行的背景色。这是,就可以通过修改插件自带的CSS文件,来实现自定义样式的功能。
在线操作方式是:登录Wordpress后台管理页面,插件-编辑-选择SyntaxHighlighter-选择syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.css-找到
1
.syntaxhighlighter .line.highlighted.alt1,
2
.syntaxhighlighter .line.highlighted.alt2
3
{
4
    background-color#e0e0e0 !important;
5
}
将其修改为:
1
.syntaxhighlighter .line.highlighted.alt1,
2
.syntaxhighlighter .line.highlighted.alt2
3
{
4
    background-color#6CE26C !important;
5
}
重起见,D瓜哥不建议做这个修改。如果以后修改“颜色主题”可能会带来一点的不良影响。
SyntaxHighlighter的“容器”样式是一个方方正正。也许不如圆角、立体阴影效果漂亮。这个效果也很容易实现。只需要修改syntaxhighlighter的样式即可;不过,这个修改是在主题的style.css文件做的。修改方式如下:将以下代码添加到主题的style.css文件里面:
1
.syntaxhighlighter{
2
     padding10px 0 !important;
3
     box-shadow: 1px 1px 3px #ccc;
4
    -webkit-box-shadow: 1px 1px 3px #ccc;
5
    -moz-box-shadow: 1px 1px 3px #ccc;
6
    border-radius: 5px;
7
   -webkit-border-radius: 5px;
8
    -moz-border-radius: 5px;
9
 }
  1. 设置背景样式
  2. 实现圆角和阴影
参考资料:
 

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

Copyright © 2015 www.wahenzan.com 哇!很赞 版权所有 浙ICP备14030256号-1 Power by DedeCms

浙公网安备 33010602005986号

声明:本站所有文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除 网站管理员:758763728

360网站安全检测平台