SyntaxHighlighter是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库。
首先到官网(http://alexgorbatchev.com/SyntaxHighlighter/)下载最新版本。我现在用的版本是3.0.83。
可以打开安装(http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html)的文档页面:
Basic Steps To get SyntaxHighlighter to work on you page, you need to do the following:
Add base files to your page: shCore.js and shCore.css
Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
Include shCore.css and shThemeDefault.css
Create a code snippet with either
or method (see below)Call SyntaxHighlighter.all() JavaScript method
在django中使用syntax highlighter,首先把下载的syntax highlighter解压,把文件包放在static静态文件夹下。
配置syntax highlighter。
比如我有一个基本模版base.html,可以现在基本模版中加入以下两句代码:
<link href="/static/syntaxhighlighter/styles/shCore.css" type="text/css" rel="stylesheet"/>
<link href="/static/syntaxhighlighter/styles/shThemeDefault.css" type="text/css" rel="stylesheet"/>
这里可以打开syntaxhighlighter\styles\,shCore.css表示基本框架的样式表,shThemeXXX.css表示以XXX为配色方案的样式表,这两个结合起来使用,和shCoreXXX.css的效果是一样的。
然后添加.js文件,比如我的paste_detail.html继承base.html,即{\% extends "base.html" %},则:
<code><pre class="brush: \{\{ object.get_syntax_display|lower \}\}"> \{\{ object.content \}\}</pre></code>
<!-- Include required JS files -->
<script language="javascript" src="/css/syntaxhighlighter/scripts/shCore.js"></script>
<!--
根据自己的需要来添加,具体见http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
-->
<script language="javascript" src="/css/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script language="javascript" src="/css/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script language="javascript" src="/css/syntaxhighlighter/scripts/shBrushJscript.js"></script>
<script language="javascript" src="/css/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script language="javascript" src="/css/syntaxhighlighter/scripts/shBrushCss.js"></script>
<!-- actually run the highlighter -->
<script language="javascript">
SyntaxHighlighter.all();
</script>
补充,认真看下安装文档的例子:
<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="css/shBrushJScript.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<!-- You also need to add some content to highlight, but that is covered elsewhere. -->
<pre class="brush: js">
function foo()
{
}
</pre>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
参考:
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/