您的位置：首页 > Web前端 > JQuery

网页语法高亮jquery插件SyntaxHighlighter使用教程

2015-09-30 14:53 751 查看

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

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

[html] view
plaincopy

<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设置语言的类别及样式选择。

[html] view
plaincopy

<pre name="code"class="js">

function a(){

alert("a");

}

</pre>

在页面底部加上

[javascript] view
plaincopy

<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	将在第一行显示行列

这些选项和别名放置在一起，使用冒号 : 字符分隔。

[html] view
plaincopy

<pre name="code"class="html:nocontrols:firstline[10]">

<html>

<body></body>

</html>

</pre>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航