代码高亮插件SyntaxHighlighter-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_14360/article/details/82577021

本文介绍如何使用SyntaxHighlighter进行代码高亮显示，包括引入所需JS和CSS文件、初始化代码以及展示不同语言代码的高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=gray][b][size=medium]SyntaxHighlighter是一个非常不错的代码高亮工具，支持各种平台，只需要前台载入代码即可。
第一步：
1、引入需要的js和css
<script type="text/javascript" src="scripts/shCore.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
这三个是必须的，如果需要给xml代码高亮显示，则需要引入xml相关的js。
<script type="text/javascript" src="scripts/shBrushXml.js"></script>

这个是css需要的js
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
这个是java需要的js
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
这个是javascript需要的js
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
这个是sql需要的js
<script type="text/javascript" src="scripts/shBrushSql.js"></script>

2、在页面初始化时调用如下js代码：
SyntaxHighlighter.all();

3、将xml代码放入<pre class="brush:xml;"></pre>标签内部。如此就可以高亮显示xml代码。
[/color][/size][/b]

下面是一个例子：


<!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的使用</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="scripts/shBrushJava.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushSql.js"></script>

	<!--根据需要显示的语言自行添加需要的js
	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
	<script type="text/javascript" src="scripts/shBrushScala.js"></script>
	<script type="text/javascript" src="scripts/shBrushVb.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.strings = {

            expandSource : '展开代码',

            viewSource : '查看代码',

            copyToClipboard : '复制代码',

            copyToClipboardConfirmation : '代码复制成功',

            print : '打印',

            help: '?'
        };

		//代码显示在标签为<pre></pre>中，syntaxhighlighter默认会自动查找<pre/>标签，其中标签可自定义，只需要加上如下配置代码
		//SyntaxHighlighter.config.tagName="textarea";

		//有些场景下不想显示工具条，有两种解决方案：
		//1、SyntaxHighlighter.defaults.toolbar=false;
		//2.在pre标签的class属性里添加toolbar:false;(<pre class="brush:xml;toolbar:false;">)
		//SyntaxHighlighter.defaults.toolbar=false;
		SyntaxHighlighter.all();
	</script>
</head>

<body >

<h1>输出XML</h1>
<pre class="brush:xml;toolbar:false;">
	<form name="uploadForm" id="uploadForm" action="${ctxPath}/importFileDatas.action" 
   		method="post" enctype="multipart/form-data">
   		<input type="file" name="uploadFile">
   		<input type="button" onclick="upload()" value="上传">
   </form>
</pre>


<BR>
<h1>输出JAVA</h1>
<pre class="brush:java;">
	public static String formatXml(String xml) {  
       String result = xml;  

       SAXReader saxReader = new SAXReader();  
       Document document = null;  
       StringWriter writer = null;  
       try {  
           document = saxReader.read(new ByteArrayInputStream(xml.getBytes()));  
           // 创建输出格式  
           OutputFormat format = OutputFormat.createPrettyPrint();  
           // 制定输出xml的编码类型  
           format.setEncoding("UTF-8");  

           writer = new StringWriter();  
           // 创建一个文件输出流  
           XMLWriter xmlwriter = new XMLWriter(writer, format);  
           // 将格式化后的xml串写入到文件  
           xmlwriter.write(document);  
           result = writer.toString();  

       } catch (Exception e) {  
           // 日志  
       } finally {  
           if (writer != null) {  
               IOUtils.closeQuietly(writer);  
           }  
       }  
       return result;  
   }  
</pre>   


<BR>
<h1>输出SQL</h1>
<pre class="brush:sql;">
	ALTER TABLE T_USER ADD ADDRESS VARCHAR(50) ADD CITY VARCHAR(100) ADD DISTRICT VARCHAR(100) ADD PROVINCE VARCHAR(100);
	CALL SYSPROC.ADMIN_CMD('reorg table T_USER'); 	
</pre>   


<BR>
<h1>输出JAVASCRIPT</h1>
<pre class="brush:javascript;">
	function test(){
		alert(111);
	}
</pre> 


<BR>
<h1>输出CSS</h1>
<pre class="brush:css;">
	.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;
	}
</pre> 

</html>