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

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

网页语法高亮jquery插件SyntaxHighlighter使用教程相关推荐

40个新鲜出炉的 jQuery 插件和免费教程【上篇】转载自：梦想天空
40个新鲜出炉的 jQuery 插件和免费教程[上篇] 转载于:https://www.cnblogs.com/chenjunLovefan/archive/2012/07/23/2605003.ht ...
js网页雪花效果jquery插件
1,使用前先导入jquery类库 2,导入雪花特效js类库 jq.snow.min.js 3,初始化代码 <script>$(function(){$.fn.snow({minSize : ...
推荐60个jQuery插件及使用教程
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
快速电商排版网页布局ps神器插件_安装教程
首先我们需要下载"淘宝电商店招海报排版PS扩展面板",支持CC2015以上版本软件,下面我们来演示一下安装教程. 01.软件图标右键,打开文件位置. 02.打开文件夹"R ...
2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...
Vue 2/3 代码片段语法高亮格式化插件这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率. 你可以在 VS Cod ...
WLW(windows live writer) 语法高亮插件
本人也在各种地方找过很多语法高亮的插件,要满足我的基本需求,能支持如下几种语法高亮: JavaScript Java SQL XML CSS 可惜一直没找到自己满意的插件,总是有各种各样的问题,特别是 ...
提升你网站水平的 jQuery 插件推荐
jQuery是一个优秀JavaScript库,它简化了HTML文档遍历,事件处理,动画和Ajax交互. jQuery的确改变了很多人写JavaScript的方式.如今,有很多现成的jQuery插件可供 ...
100个优秀jQuery插件精选
100个优秀jQuery插件精选在2012年里出现了很多很棒的jQuery插件,如结合CSS3的jQuery动画.强大的支持多设备浏览的响应性布局设计.使用视频作为网页设计背景.jQuery图像幻灯 ...
js网页3D雪花特效插件(导入直接使用，参数齐全)
//导入js类库 <script src="js/snow/threecanvas.js"></script> <script src="j ...

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

网页语法高亮jquery插件SyntaxHighlighter使用教程相关推荐

最新文章

热门文章