如何用syntaxhighlighter显示高亮代码

来源：互联网发布：flac转ape软件编辑：程序博客网时间：2024/05/20 07:57

先去 http://alexgorbatchev.com/SyntaxHighlighter/download/ 下载syntaxhighlighter最新版本3.0.83这个插件。

在页面引入核心js和css，这里我要对js代码高亮，所以引用了JScript.js这个文件。

<link rel="stylesheet" type="text/css"href="css/SyntaxHighlighter.css"/><script type="text/javascript"src="js/shCore.js"></script><script type="text/javascript"src="js/shBrushJScript.js"></script>

把代码写到一个<pre>或者<textarea>标签里，如图。

需要注意是这里的name和class属性，name是需要通过插件获取才能应用高亮样式，class设置语言的类别及样式选择。

<pre name="code"class="js">function a(){   alert("a");}</pre>

在页面底部加上

<scripttype="text/javascript">dp.SyntaxHighlighter.HighlightAll('code');//这里的‘code’ 为上面放置代码的容器</script>

另外附上语言的别名。

C++cpp, c, c++C#c#, c-sharp, csharpcsscssDelphidelphi, pascalJavajavaJava Scriptjs, jscript, javascriptPHPphpPythonpy, pythonRubyrb, ruby, rails, rorSqlsqlVBvb, vb.netXML/HTMLxml, html, xhtml, xslt

class允许配置的选项。

nogutter将不会显示行号nocontrols将不会在顶部显示控制器collapse将默认折叠代码firstline[value]行计数开始值。默认值是 1showcolumns将在第一行显示行列

这些选项和别名放置在一起，使用冒号 : 字符分隔。
<pre name="code"class="html:nocontrols:firstline[10]">   <html>      <body></body>    </html></pre>