SyntaxHighlighter详细配置

一 什么是SyntaxHighlighter?

SyntaxHighlighter一个基于JavaScript实现的将网页中展示的代码根据语法高亮显示功能

 

 

二 为什么选择SyntaxHighlighter?

SyntaxHighlighter功能全面,并且独立可以引用到任何网页。

wordpress写博客,一般有2种代码高亮方式:1是代码高亮插件,其中很多都是基于SyntaxHighlighter开发的,通过js后渲染的;2是通过windows live writer的code snippet插件或code render的直接把代码做成高亮语法的html代码

2种方式各有优势,后一种方式加载速度快,页面打开即语法高亮,缺点是修改部分代码后要重新生成所有代码

我个人倾向于采用第一种方式,但不建议使用插件,建议直接将SyntaxHighlighter整合到主题中,按需来加载JS,详细的方法我会在后面介绍

 

三 效果演示

 

 

四 安装步骤

 

 

1、 引入shCore.js 和 shCore.css ;

2、 引入所需要的brushes,比如高亮显示JavaScript需要引入shBrushJScript.js;

3、引入级联样式表文件:shCore.css 和 shThemeDefault.css ;

4、 用<pre>标签标识准备高亮显示的代码段;

5、 调用SyntaxHighlighter.all()方法。

代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SyntaxHighlighter Build Test Page</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
</head>

<body >
<h1>SyntaxHihglighter Test</h1>
<p>This is a test file to insure that everything is working well.</p>

<pre class="brush: c-sharp;">
function test() : String
{
	return 10;
}
</pre>
</html>

 

  1.  
四 详细配置

 

 

SyntaxHighlighter.config中的配置项的作用范围是被高亮显示的整个代码块,而对于代码块中单行的代码则没有什么意义,以下为具体配置项的说明:

Name Value Description
bloggerMode false 如果你要高亮的内容位于blogger.com,那么你需要开启这个开关。
strings Object 该配置项允许你修改默认信息。
stripBrs false 该选项会自动过滤掉被高亮代码块中每行后面自动添加的<br />标记
tagName "pre" 该配置项允许使用其他标签来标识代码块。

代码示例:

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

 

 

SyntaxHighlighter.defaults中的配置项的应用对象是代码块中的单行代码。

Name Value Description
auto-links true 是否自动检测代码块中的超链接。关闭该配置型,则代码块中的链接被关闭,无法点击进入。
class-name '' 加入自定义样式。
collapse false 代码块是否默认折叠。
first-line 1 该配置项允许修改起始行的行号。
gutter true 该配置项用来设置行号显示与否。
highlight null 该配置项用来着重显示某些代码行。可以通过单个数字来着重显示单行,或者传入一个类似 [1, 2, 3] 的数组来着重显示指定的多行。
html-script false 开启该配置项可以高亮显示HTML/XML代码,这在WEB开发中非常常见。开启该配置项需要shBrushXml.js的支持,同时你的brush也需要支持该特性。
smart-tabs true 该配置项用来开启或关闭 mart tabs 特性。
tab-size 4 该配置项用来设置代码块中tab键的大小。
toolbar true 配置项用来设置工具栏的显示与否。

 

代码示例:

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
...
SyntaxHighlighter.all();

 

 

Parameters
Parameters仅在当前代码段中生效,我们可以利用Parameters的这个特性为同一页面的不同代码段设置不同的高亮效果。Parameters利用键值对进行设置,这种形式同CSS非常类似。

通过设置Parameters,我们可以修改 SyntaxHighlighter.defaults 中的任意配置项的默认值。

代码示例:

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

 

 

 

 

如何给网站制作一个favicon.ico图标,附代码(图)

ico图标是网站的头像,在打开网站的时候出现在IE的地址栏里,目前大多数浏览器都支持,最常用的IE6.0则显示加入本地收藏夹网站的ICO图像:

绝大多数网站可以没有ICO头像,但如果做为一个一流的网站,没有ICO头像是很难令人信服的.就好象一个人穿了一身正装但却没有打领结一样冒失.

上面的图片是我的个人网站的ICO图标,以下是一些名站的头像:

Google
google

百度
baidu

新浪
新

新华网
title

QQ
qq

多数有名的设计网站更重视ICO图标:

设计在线:
设计在线

闪客帝国:
闪客

逸品设计:
逸品室内设计

其实制作ICO图标很简单,主要是很少软件支持ICO格式,关键是将JPG或GIF转为ICO格式,网上下载的可以转ICO格式的软件全是收费的,没有一个可以完全免费使用的,下面的方法可以不用花钱一样可以做成自己的ICO图标。
步骤:
1:先用画图软件最好是FireWorks或Photoshop做一个16*16的图标存为gif或者jpeg格式
2:到这个网站转化为ico文件:http://www.chami.com/html-kit/services/favicon/
3:上传到网站的根目录下就完成了。

现在把你的网站加入收藏夹再重新打开看看,就是这样简单!

如果没有显示,可以在网页的head里加入下面的代码:

 

<meta content="text/html; charset=gb2312" http-equiv="Content-Type" />
<link href="images/favicon.ico" rel="icon" />
<link href="images/favicon.ico" rel="shortcut icon" />

 

提供一个在线编辑icon的网站:http://www.favicon.cc

技巧:制作16X16的图片千万不要先做大图再改变分辨率,这样做不出清晰的图标的,就当是用16乘16的=256个小方块拼一个图标出来,在Photoshop里也可以实现.我见过有在16X16的格里拼出一个熊猫的,还是全身的.这就要高度概括的能力了.