html代码高亮显示,js代码高亮显示

引子

很多博客和论坛都有代码识别,代码高亮显示,那么这些代码高亮制作是如何完成的呢?其实代码高亮的方法有很多,网上随便搜搜,最起码能找到九种代码高亮的方法!下面我来介绍一种代码高亮的方法。那就是用syntaxhighlighter这个插件。

案例介绍

下面请看我用syntaxhighlighter写的一个demo吧!


案例请查看

上面案例中的代码已经高亮显示,那么这是如何制作的呢?

案例代码

html代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="http://www.xyhtml5.com/post/html_js_dmgl/js/sandbox/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.xyhtml5.com/post/html_js_dmgl/js/scripts/brush.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.xyhtml5.com/post/html_js_dmgl/js/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://www.xyhtml5.com/post/html_js_dmgl/js/styles/shThemeDefault.css"/>
</head>
<body>
<h1>
代码高亮演示 SyntaxHighlighter
</h1>
<pre class='brush: javascript'>
@炫H5
$(document).ready(function(){
SyntaxHighlighter.config.clipboardSwf = 'clipboard.swf';//加载swf
SyntaxHighlighter.all();
});
</pre>
</body>
</html>

js代码:

$(document).ready(function(){
SyntaxHighlighter.config.clipboardSwf = 'clipboard.swf';
SyntaxHighlighter.all();
});

syntaxhighlighter下载地址

https://code.google.com/p/syntaxhighlighter/downloads/detail?name=SyntaxHighlighter_1.5.1.rar&can=2&q=

以上是html代码高亮显示,js代码高亮显示的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>