代码高亮插件SyntaxHighlighterde

最新推荐文章于 2022-10-12 22:19:03 发布

Jonia917

最新推荐文章于 2022-10-12 22:19:03 发布

阅读量596

点赞数

文章标签：代码高亮显示插件 SyntaxHighLight

本文链接：https://blog.csdn.net/Jonia917/article/details/47624803

版权

第一步：下载插件 SyntaxHighlighter

1、登录官网，http://alexgorbatchev.com/SyntaxHighlighter/integration.html；找到页面上的“download”链接，进入下载页面：

2、进入下载页面后选择要下载的版本，我下载的是2.1.382，如下：

3、加压下载的文件,得到下面的文件:

第二步：小试牛刀，动手做

1、新建test.html,首先导入scripts文件夹下的shCore.js和styles下的shCore.css；

2、导入要加高亮的语言对应的scripts文件夹下的js文件，这里以JavaScript代码为例：

3、写入下面代码：

SyntaxHighlighter.all();

</script>

4、写入HTML代码：

<body>
<pre class="brush: javascript;">
var myCustomFn = function ShowFn() {
Ext.Msg.alert('消息框', "你好，欢迎学习SyntaxHighLight!");
}
</pre>
</body>

5、在浏览器中打开该文件，查看效果：

6、添加样式文件，

7、效果如下：

完整的代码如下：

注意：HTML代码显示在标签为<pre></pre>中，syntaxhighlighter默认会自动查找<pre />标签，其中标签可自定义，可以是<div>，<ul >，<ol >等等，只需要加上如下配置代码：

SyntaxHighlighter.config.tagName = 'div';

同时根椐class类名选择不同的格式刷，由于以javascript为实例，因此格式刷配置为javascript，如上：class="brush: javascript;"

鼠标移动到代码区域时会显示一个工具条，分别是显示代码，复制代码，打印代码和帮助四个功能，默认为英文，改中文设置如下：

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';

SyntaxHighlighter.config.strings = {

expandSource : '展开代码',

viewSource : '查看代码',

copyToClipboard : '复制代码',

copyToClipboardConfirmation : '代码复制成功',

print : '打印',

help: '?',

alert: '语法高亮\n\n',

noBrush: '不能找到刷子: ',

brushNotHtmlScript: '刷子没有配置html-script选项',

aboutDialog: '<div></div>'

};

SyntaxHighlighter.all();

</script>

效果如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>代码高亮显示</title>
<script type="text/javascript" src="../scripts/shCore.js"></script>
<link type="text/css" rel="stylesheet" href="../styles/shCore.css"/><link type="text/css" rel="stylesheet" href="../styles/shThemeDefault.css"/>
<script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '../scripts/clipboard.swf';
SyntaxHighlighter.config.tagName = 'div';
SyntaxHighlighter.config.strings = {
expandSource : '展开代码',
viewSource : '查看代码',
copyToClipboard : '复制代码',
copyToClipboardConfirmation : '代码复制成功',
print : '打印',
help: '?',
alert: '语法高亮\n\n',
noBrush: '不能找到刷子: ',
brushNotHtmlScript: '刷子没有配置html-script选项',
aboutDialog: '<div></div>'
};
SyntaxHighlighter.all();
</script>
</head>
<body>
<div class="brush: javascript;">
var myCustomFn = function ShowFn() {
Ext.Msg.alert('消息框', "你调用了客户端的JavaScript函数");
}
</div>
</body>
</html>