SyntaxHighlighter 编程代码语法高亮插件
在文章中经常要插入很多代码,在文章中的代码看起来不是那么好看,相比于编辑器来讲,就逊色了很多,那么有没有这样一个工具可以实现编程代码的语法高亮,想编辑器那样的语法高亮,SyntaxHighlighter 可以帮您实现。
使用方法
解压压缩包,scripts文件夹中包含了各种语言的JS文件,在 styles
文件夹中是各种显示高亮的主题。
1、首先要引入其核心 javascript
文件 shCore.js
和核心CSS文件 shCore.css
,这两个是必选要引入的。
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<script src="scripts/shCore.js"></script>
2、引入你要高亮的语言 JS
,比如我想高亮显示的是 C#
,那么必须引入在 scripts
文件夹中的 shBrushCSharp.js
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
3、最后引入高亮显示的主题 CSS,默认的为 shThemeDefault.css
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
4、配置您的 SyntaxHighlighter
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();
5、在需要高亮的代码添加 <pre>
标签,并添加 class="brush:c-sharp"
属性,其中 brush
的值也就是你的代码是数据那种编程语言
<pre>
function test():String{
return 10;
}
</pre>
注意: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();
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论