大家写博客时，常常需要贴出代码，但显示在blog页面上的效果往往很难让人满意(不能语法高亮)，习惯了在开发工具中看语法高亮代码的我们肯定也想在blog上看到同样的效果。那如何实现一个代码高亮效果呢？经常上一些技术大牛的博客，发现很多都是用的SyntaxHighlighter语法高亮工具，于是推荐给阿东，由于它不需要与服务器交互，所以安装这个扩展很简单，只需要包含相应css文件，js文件，就可以轻松实现代码高亮。很快，阿东便在APJ的博客上安装了SyntaxHighlighter扩展。
使用SyntaxHighlighter高亮显示代码也非常简单，下面就以实例介绍如何使用syntaxhighlighter语法高亮工具优化你的代码显示，让你和那些大牛一样能在博客上写出"漂亮"的代码。更详细的使用说明可以访问SyntaxHighlighter的网站。
首先来看一段javascript代码使用高亮后的效果：
/**
* demo function
*/
function foo()
{
alert('Hello World!');
// it works!
}
效果还不错吧。我们来看看是怎么做到的：
第一步，打开一个notepad，在里面贴入要显示的语句，例如上面例子中的：
/**
* demo function
*/
function foo()
{
alert('Hello World!');
// it works!
}
注：如果你的代码中有“<”(小于号)，还要把全部的“<”都替换为“<”，后文会解释原因。
第二步，用一个<pre></pre>把代码包裹起来，并通过pre元素的class来指定要展示的是什么语言。就像：
<pre class="brush: js">
......
</pre>
注：为了节省篇幅，我们用......代表要显示的代码块。
第三步，从notepad中拷贝上面所有的代码，并粘贴到你想要显示的blog的位置，注意这里要在blog编辑器的HTML模式下进行粘贴。在APJ的博客上可以有两种方式切换到HTML模式：
方法1是点击“HTML”按钮：
方法2是选中“User raw HTML editor”单选框：
现在再来具体解释一下其中的细节：
第一步中，为什么要把“<”替换成“<”呢？上面的步骤中也提到我们最后的代码块加上pre的包装是以HTML的方式放入文章中的，在HTML中“<”代表一个标签的开始，后面的内容就不会正常解释了，要想在HTML中正常显示一个“<”，要用它的转义符“<”。其实大家平时想在网页中多显示几个空格时，就会用到空格的转义符“ ”，其实是同一个意思。 其实SyntaxHighlighter支持两种方式高亮显示，一个是用我们正在介绍的pre标签来显示，还有一个是用script标签来显示。用script标签可以解决转义的问题，可以免去替换“<”的步骤，它的实现方法是把代码放在“<![CDATA[”和“]]>”中间（点击了解更多）。但是不幸的是我们APJ的博客的编辑器不支持输入“<![CDATA[”和“]]>”，所以只能使用pre的方式，杯具啊！而且我试过，我们用pre的方式，只需要替换“<”，不需要替换“>”，我发现“>”是被自动替换成“>”。那为什么我们不需要替换空格，接着看下面。
第二步中，为什么要用pre标签来显示代码呢？如果直接把代码块放在HTML中，其中的一些空格，回车换行，以及缩进都会被忽略掉，而pre标签元素(preformatted text)是专门用来展现预定义格式（包括空格，回车换行，以及缩进）的标签。
在<pre>标签中可以通过不同的配置，为各种语言做高亮显示，目前SyntaxHighlighter支持二十多中语言高亮显示，我们用的比较多的是：
|
语言
|
配置值（注意全都是小写）
|
|
C#
|
c#, c-sharp, csharp
|
|
VB.net/ VB Script
|
vb
|
|
C/ C++
|
c, cpp
|
|
CSS
|
css
|
|
Javascript
|
js
|
|
Java
|
java
|
|
PHP
|
php
|
|
Plain Text
|
plain, text
|
|
SQL
|
sql
|
|
XML/ HTML
|
xml, xhtml, xslt, html, xhtml
|
下面再多看几个例子：
SQL ，写法：<pre class="brush: sql">......</pre>
delete from [cqaInterfaceFilter]
insert into [cqaInterfaceFilter]([QualCode] ,[SystemCode])
select [QualCode],'' from cqaQualCode where Substring(Upper(QualCode),1,1) in ('R','S')
HTML：<pre class="brush: html">......</pre>
注：第二行自动换行了，因为一行摆不下，但是行号还是对的。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello, world!</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
C#：<pre class="brush: c#; highlight: [4, 18]">......</pre>
注：第18行自动换行了
注：如果想要特别突显某行，如下面的第4行和第18行，配置也很简单，就是在pre的class中写上 highlight: [4, 18]
using System;
using System.Web;
namespace Test
{
/// <summary>
/// Test class for highlight in blog
/// </summary>
public partial class WebForm1 : System.Web.UI.Page
{
/// <summary>
/// Page load event
/// </summary>
/// <param name="sender">The sender</param>
/// <param name="e">The event parameter</param>
protected void Page_Load(object sender, EventArgs e)
{
HttpContext.Current.Response.Write("Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World ");
HttpContext.Current.Response.End();
}
}
}
VB.net：<pre class="brush: vb">......</pre>
Imports System
Imports System.Web
Namespace Test
''' <summary>
''' Test class for highlight in blog
''' </summary>
Public Partial Class WebForm1
Inherits System.Web.UI.Page
''' <summary>
''' Page load event
''' </summary>
''' <param name="sender">The sender</param>
''' <param name="e">The event parameter</param>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
HttpContext.Current.Response.Write("Hello World")
HttpContext.Current.Response.End()
End Sub
End Class
End Namespace
CSS：<pre class="brush: css">......</pre>
.syntaxhighlighter {
width: 99% !important; /* 99% fixes IE8 horizontal scrollbar */
margin: 1em 0 1em 0 !important;
padding: 1px !important; /* adds a little border on top and bottom */
position: relative !important;
}
Java：<pre class="brush: java">......</pre>
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
class HelloWorldApp {
public static void main(String[] args) {
System.out.println("Hello World!"); // Display the string.
}
}
介绍一个小技巧，当你想要拷贝某段代码时，直接从页面上copy，会把行号一起拷贝，如果想只拷贝原始代码，可以把鼠标移到代码块上，代码块的右上角会出现一个工具栏，其中第一个按钮“view source”会弹出一个只包含原始代码块的窗口，再Ctrl+A，Ctrl+C。或者直接点击第二个“copy to clipboard”按钮就拷贝到了剪贴板，不过第二个按钮是用Flash做的，你的机器必须有安装Flash Player才能使用。不过我相信只要有上网，大家都应该装了Flash Player，所以“copy to clipboard”按钮是最方便的拷贝代码方式。
SyntaxHighlighter还可以改变Theme，甚至定制Theme，让代码显示更符合用户自己的需要，看看它提供的另外一个深色背景的Theme吧：
这个黑色背景的看上去也不错，眼睛看着不累，也节能环保。不过Theme不是每个blog用户可以自己改的，这是由admin来管理，一旦修改便会改变所有用户代码显示的样式。如果大多数人都喜欢某个Theme才好叫管理员修改配置。
就介绍这么多，如果想知道更多，可以去访问它的网站。有了这么好的条件，还希望大家多多写博，多来秀秀你的代码。
Subscribe