整合Syntax Highlighter到django应用程序中

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 <pre /> or <script /> method (see below)
  • Call SyntaxHighlighter.all() JavaScript method

在django中使用syntax highlighter,首先把下载的syntax highlighter解压,把文件包放在static静态文件夹下。

配置syntax highlighter。
比如我有一个基本模版base.html,可以现在基本模版中加入以下两句代码:

[code lang=”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"/>
[/code]

这里可以打开syntaxhighlighter\styles\,shCore.css表示基本框架的样式表,shThemeXXX.css表示以XXX为配色方案的样式表,这两个结合起来使用,和shCoreXXX.css的效果是一样的。

然后添加.js文件,比如我的paste_detail.html继承base.html,即{% extends “base.html” %},则:

[code lang=”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>

[/code]

补充,认真看下安装文档的例子:

[code lang=”html”]
<!– 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>
[/code]

发布者

Tanky Woo

Tanky Woo,[个人主页:https://tankywoo.com] / [新博客:https://blog.tankywoo.com]

《整合Syntax Highlighter到django应用程序中》有4个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注