syntaxHighlighter 使用

发表于 JS 分类，标签:
02 11月 2015
0

1.下载最新版本syntaxHighlighter  http://alexgorbatchev.com/SyntaxHighlighter/download/   


2.引入核心的js和css.

当我们下载包以后在styles文件夹我们有这么多css

blob.png

shCore.css 为最核心的css ,另外里面带有theme等于换肤的css

例如： shCoreDjango.css= shCore.css+shThemeDjango.css ; 其他的类似；

当我们下载包以后在scripts文件夹我们有这么多js 文件


blob.png

其中标红框的js 为核心的js,

其他的js为针对不同类型代码的js文件，例如我们需要显示css代码块，那么我们应该引入

shBrushCss.js

demo页面

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>测试</title>

<link type="text/css" rel="stylesheet" href="styles/shCoreRDark.css"/>

</head>

<body>

<h1>这是一个SyntaxHighlighte测试</h1>

<pre class="brush:css">


.css{

border:1px solid red;

}

</pre>

<script type="text/javascript" src="scripts/shCore.js"></script>

<script type="text/javascript" src="scripts/shBrushCss.js"></script>

<script type="text/javascript">

SyntaxHighlighter.all();

</script>

</body>

</html>


页面效果

这是一个SyntaxHighlighte测试

?
1
2
3
4
5
.css{
    border:1px solid red;
}


注意：上面的代码必须在<pre>或者<textarea>标签里，另外class=""  中指定语言的类别及样式，上例中使用的css语言及样式,

SyntaxHighlighter.all();   加载插件


附上语言的别名。


C++cpp, c, c++
C#c#, c-sharp, csharp
csscss
Delphidelphi, pascal
Javajava
JavaScriptjs, jscript, javascript
PHPphp
Pythonpy, python
Rubyrb, ruby, rails, ror
Sqlsql
VBvb, vb.net
XML/HTMLxml, html, xhtml, xslt


0 篇评论

发表我的评论