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 demo
SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 博文参考地址:http://blog.csdn.net/itmyhome1990/article/details/38517737
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉。... SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,SyntaxHighlighter 可以对大部分编程语言进行着色渲染,而且代码高亮的性能也非常不错
SyntaxHighLighter代码高亮插件实例(支持JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类)版本_2.1.364
代码语法高亮的JS插件及例子,基于SyntaxHighlighter实现的CSS、PHP、ASP、SQL、XHTML代码自动高亮插件,若你是开发者网站,这个功能对你绝对有用,下载插件包,自带有使用演示。
实现在网页上插入代片断,美观,方便使用。
SyntaxHighlighter高亮插件,可以格式化JAVA、PHP、CSS、SQL、XML、Python等等一些主流的代码格式。
主要介绍了帝国CMS FCKeditor编辑器添加插入代码插件方法(基于SyntaxHighlighter代码高亮插件),需要的朋友可以参考下
FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合方法,里面有下载,可以根据需要结合自己的fckeditor版本。
内容索引:脚本资源,jQuery,语法高亮,jQuery插件 jQuery 语法高亮插件调用示例,本插件核心仍是SyntaxHighlighter,但是经过了简化处理,现在调用方法和所用脚本文件都比较少,效果也挺不错,演示如上图,语法高亮在...
FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,FCKeditor + SyntaxHighlighter 让代码高亮着色,可以最小化修改您的程序实现效果
一款用js写的代码高亮插件,附有使用实例,还没有起名字,自我感觉良好。可自动识别HTML/CSS/JS代码,同时也能高亮显示HTML网页中嵌套的CSS和JS,有些判断并不是很严谨,但是多数情况下是适用的,SyntaxHighlighter...
db.SyntaxHighlighter 语法高亮插件下载,SyntaxHighlighter几乎支持所有编程语言的代码高亮功能,你可将需要高亮的代码放入Textarea中,本插件会自动获取内容后根据初始设置高亮代码中的关键字、常量、变量、函数名...
CKEditor代码高亮整合示例源码 项目描述 此示例把编辑器ckeditor和代码高亮syntaxhighlighter两个插件 整合到一起,这样编辑器就可以高亮显示代码信息了。 读起来很舒服。 欢迎感兴趣的用户下载学习。
现在大家可以不必像我这样为了实现代码高亮的功能,去修改ckeditor编辑器,大家可以去使用百度编辑器(Ueditor)他有代码高亮的功能,还蛮好用的,我的个人网站就是的百度编辑器的。欢迎大家去我的博客看看
内附官方原版的 和我改过的 有兴趣的自己下去看吧 我改了后删了很多东西 合并了很多东西 内附demo
syntaxhighlighter 是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库 代码高亮插件 html pre 各种显示高亮的主题 官网下载链接在文档中
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站
SyntaxHL 是一个 TinyMCE 的插件,可让你在编辑器中插入具有语法高亮效果的代码,使用的是 SyntaxHighlighter 语法高亮库。 标签:SyntaxHL