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

87 阅读1分钟

本文写于2014年,原生js现在也有高亮api了,可以查看我最新文章。

引子

很多博客和论坛都有代码识别,代码高亮显示,那么这些代码高亮制作是如何完成的呢?其实代码高亮的方法有很多,网上随便搜搜,最起码能找到九种代码高亮的方法!下面我来介绍一种代码高亮的方法。那就是用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();
});

syntaxhighlighter下载地址

code.google.com/p/syntaxhig…