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

最新推荐文章于 2024-08-10 08:35:27 发布

shakeweizhen

最新推荐文章于 2024-08-10 08:35:27 发布

阅读量1.8k

点赞数

文章标签： SyntaxHighlighter jquery 前端

本文链接：https://blog.csdn.net/shakeweizhen/article/details/48828647

版权

先去 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>  

shakeweizhen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

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