mainfest v3 jq开发关键字高亮插件代码高亮插件

转载

mob6454cc6e409f 2024-06-06 14:49:33

文章标签 代码高亮显示插件 SyntaxHighLight html javascript 文章分类 架构后端开发

第一步：下载插件 SyntaxHighlighter

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

mainfest v3 jq开发关键字高亮插件代码高亮插件_html

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

mainfest v3 jq开发关键字高亮插件代码高亮插件_javascript_02

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

mainfest v3 jq开发关键字高亮插件代码高亮插件_代码高亮显示_03

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

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、在浏览器中打开该文件，查看效果：

mainfest v3 jq开发关键字高亮插件代码高亮插件_SyntaxHighLight_04

6、添加样式文件，

7、效果如下：

mainfest v3 jq开发关键字高亮插件代码高亮插件_SyntaxHighLight_05

完整的代码如下：

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

SyntaxHighlighter.config.tagName = 'div';

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

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

'scripts/clipboard.swf';

SyntaxHighlighter.config.strings = {

'展开代码',

'查看代码',

'复制代码',

'代码复制成功',

'打印',

'?',

'语法高亮\n\n',

'不能找到刷子: ',

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

'<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>