SyntaxHighlighter 编程代码语法高亮插件

发布于 2018-04-21 20:14:33 字数 2666 浏览 1957 评论 0

在文章中经常要插入很多代码,在文章中的代码看起来不是那么好看,相比于编辑器来讲,就逊色了很多,那么有没有这样一个工具可以实现编程代码的语法高亮,想编辑器那样的语法高亮,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();

项目地址:http://alexgorbatchev.com/SyntaxHighlighter/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。