您的位置：站点首页 > 技术文章 >正文

SyntaxHighlighter源码高亮插件的基本使用方法

2014-08-30 17:13:26|?次阅读|上传:huigezrx【已有?条评论】发表评论

关键词：JavaScript, HTML/CSS, 界面设计, Web|来源：唯设编程网

2. SyntaxHighlighter 的用法

SyntaxHighlighter 的基本使用流程如下：

  1. 在你的页面中添加基础文件shCore.js和shaCore.css(Add base files to your page: shCore.js and shCore.css)
  2. 添加你需要的格式刷对应的js文件(Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes))
  3. 包含shCore.css和shThemeDefault.css(Include shCore.css and shThemeDefault.css)
  4. 使用<pre/>或者<script/>创建对应的高亮代码(Create a code snippet with either <pre /> or <script /> method (see below))
  5. 调用SyntaxHighlighter.all()方法实现源码高亮显示(Call SyntaxHighlighter.all() JavaScript method)

下面以SyntaxHighlighter 提供的demo分析SyntaxHighlighter 的用法，该例子的完整代码如下：

<!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>Hello SyntaxHighlighter</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/shCoreDefault.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>

<body style="background: white; font-family: Helvetica">

<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: csharp;">
function helloSyntaxHighlighter()
{
	return "hi!";
}
List<Article> arList = Article.getArticleList(1, 10, strFields, orderMap[orderKey]);
        Random rd = new Random();
        Article article = null;
</pre>

</html>

该例子给出了一段C#的测试代码，使用<pre>进行封装，该<pre>元素的class属性设置为"brush:csharp;"，在<head>部分，分别包含了两个核心文件(shCore.js和shCoreDefault.css)还包括了格式刷对应的js文件(shBrushCShart.js)，最后调用SyntaxHighlighter.all();完成源码高亮着色。

最终该页面实现的效果如下：

SyntaxHighlighter源码高亮插件的基本使用方法

注意：HTML代码显示在标签为<pre></pre>中，syntaxhighlighter默认会自动查找<pre />标签，其中标签可自定义，可以是<div>，<ul >，<ol >等等，只需要加上如下配置代码：

SyntaxHighlighter.config.tagName = 'div';

同时根椐class类名选择不同的格式刷，由于以C#为实例，因此格式刷配置为csharp，如上：class="brush: csharp;"

如果你需要使用其它主题格式，可以将shCoreDefault.css替换成对应的css文件，syntaxhighlighter提供了丰富的主题，如下所示：

SyntaxHighlighter源码高亮插件的基本使用方法

<12>
【发表评论0条 】
网友评论(共?条评论)..
SyntaxHighlighter源码高亮插件的基本使用方法