引子
很多博客和论坛都有代码识别,代码高亮显示,那么这些代码高亮制作是如何完成的呢?其实代码高亮的方法有很多,网上随便搜搜,最起码能找到九种代码高亮的方法!下面我来介绍一种代码高亮的方法。那就是用syntaxhighlighter这个插件。
案例介绍
下面请看我用syntaxhighlighter写的一个demo吧!
上面案例中的代码已经高亮显示,那么这是如何制作的呢?
案例代码
html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script class="jquery library" src="js/sandbox/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts/brush.js"></script>
<link type="text/css" rel="stylesheet" href="js/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="js/styles/shThemeDefault.css"/>
</head>
<body>
<h1>
代码高亮演示 SyntaxHighlighter
</h1>
<pre class='brush: javascript'>
@haorooms
$(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();
});