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代码。
下面是一个例子：
<!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>
分享到：
相关推荐
【JS代码高亮插件SyntaxHighlighter】是一个用于在网页中展示编程代码的工具，它能够将源代码美化，使其更易于阅读和理解。SyntaxHighlighter由Alex Gorbatchev开发，支持多种编程语言，包括JavaScript、HTML、CSS、...
《网页代码高亮插件——SyntaxHighlighter深度解析》 在网页开发中，展示源代码是常见的需求，而为了使代码更加清晰易读，我们通常会使用代码高亮插件。SyntaxHighlighter是一款广泛使用的JavaScript代码高亮插件，...
wps代码块插件
SyntaxHighLighter代码高亮插件实例(支持JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类)版本_2.1.364
代码语法高亮的JS插件及例子，基于SyntaxHighlighter实现的CSS、PHP、ASP、SQL、XHTML代码自动高亮插件，若你是开发者网站，这个功能对你绝对有用，下载插件包，自带有使用演示。
SyntaxHighlighter是一款强大的代码高亮插件，它专为网页设计者和开发者提供便利，使得在网页上展示源代码变得更加美观且易读。这款工具无需服务器支持，只需在网页中引入相应的JavaScript库，即可实现对多种编程...
在WordPress等博客平台中，为了使代码段在文章中清晰易读，通常会使用代码高亮插件。JavaEye的代码高亮插件以其简洁、高效而受到许多开发者的青睐。然而，当你试图在WordPress中寻找与JavaEye类似的代码高亮插件时，...
SyntaxHighlighter是一款流行的开源...总之，SyntaxHighlighter是一款强大的代码高亮插件，通过其丰富的功能和广泛的语言支持，为网页上的代码展示提供了极大的便利。无论是个人博客还是专业开发团队，都能从中受益。
SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/38517737
SyntaxHighlighter是一款流行的JavaScript代码高亮插件，用于在网页上展示源代码时提供美观的语法高亮效果。它能够使代码更易于阅读，提升用户体验，尤其对于技术博客、在线教程和开发者社区来说，是非常实用的工具...
整合FCKeditor与SyntaxHighlighter代码高亮插件的过程主要涉及如何将SyntaxHighlighter的功能嵌入到FCKeditor编辑器中，以便用户在编辑器内部撰写代码时，能够享受到即时的代码高亮显示。这种整合对于编写和展示代码...
为了提升代码插入的专业性和可读性，可以通过添加SyntaxHighlighter代码高亮插件来实现。 SyntaxHighlighter是一款流行的代码高亮插件，它能够让网页中的代码段落更加易于阅读，同时提供多种代码语言的支持。为了...
本文将详细介绍如何在Discuz7中利用syntaxhighlighter_2.0.320插件实现代码高亮显示，以提升用户在论坛中分享和阅读代码的体验。 首先，我们需要理解什么是代码高亮。代码高亮是一种通过不同颜色和样式突出显示代码...
在React Native中，我们经常需要展示代码片段，这时就需要用到代码高亮组件。"React Native的一个代码高亮组件"是专门为在React Native应用中优雅地展示源代码而设计的库。 代码高亮组件对于提升代码可读性和用户...
内容索引:脚本资源,jQuery,语法高亮,jQuery插件 jQuery 语法高亮插件调用示例，本插件核心仍是SyntaxHighlighter，但是经过了简化处理，现在调用方法和所用脚本文件都比较少，效果也挺不错，演示如上图，语法高亮在...
这样，你就成功地在CKEditor中集成了`SyntaxHighlighter`代码高亮插件。现在，用户可以在编辑器中插入代码，并且插入的代码会根据所选语言自动进行颜色高亮显示，极大地提高了代码的可读性。 在实际应用中，你可能...
1. CKEditor代码高亮插件的修复与发展历程 - 插件的更新发布：文中提到前一天匆忙发布了更新版，之后在当天又发现了解决问题的方法。 - 插件的完善：作者通过查阅CKEditor的API文档，成功找到了解决问题的办法，...
7. **styles** 目录：这里存放的是CSS样式文件，这些文件定义了代码高亮后的颜色样式和布局。根据个人喜好或网站设计，我们可以修改这些样式文件以适应不同的主题或视觉效果。 使用这个jQuery语法高亮插件，开发者...
FCKeditor是现在最为流行的开源编辑器，SyntaxHighlighter是一个用JS实现的代码高亮显示插件，FCKeditor + SyntaxHighlighter 让代码高亮着色，可以最小化修改您的程序实现效果