如何用syntaxhighlighter显示高亮代码

先去 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, csharp
css css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

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

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



你可能感兴趣的:(JavaScript,代码高亮)