代码高亮插件SyntaxHighlighter

简介: 现在版本syntaxhighlighter_2.1.364 第一       解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题 第二   如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的。其次引入你要高亮的语言JS,比如我想高亮显示的是C#

现在版本syntaxhighlighter_2.1.364

  • 第一

      解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题

  • 第二

  如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css这两个是必选要引入的。其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js最后引入高亮显示的主题CSS,默认的为shThemeDefault.css

  • 第三

      下面以高亮显示JavaScript代码为例讲解。

     引入JSCSS文件之后还要在页面上写相关代码。

      JavaScript代码

    <script type="text/javascript">

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

        SyntaxHighlighter.all();

    </script>

      HTML代码:

    <pre class="brush: javascript;">

    var myCustomFn = function ShowFn() {

        Ext.Msg.alert('消息框', "你调用了客户端的JavaScript函数");

    }

</pre>

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

SyntaxHighlighter.config.tagName = 'div';

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

  • 第五

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

    <script type="text/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>

看下最终效果展示:

最后该插件下载地址: /Files/meiqunfeng/代码高亮插件syntaxhighlighter_2.1.364.zip

目录
相关文章
|
6月前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
334 1
vscode编辑器中如何调试nextjs代码
|
6月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
96 4
|
6月前
|
前端开发 JavaScript PHP
【vscode编辑器插件】前端 php unity自用插件分享
【vscode编辑器插件】前端 php unity自用插件分享
41 0
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
117 0
|
7月前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
150 0
|
7月前
|
前端开发 JavaScript
React vscode 开发插件与代码补全提示
React vscode 开发插件与代码补全提示
285 0
|
JSON 自然语言处理 搜索推荐
开发一款专属的 VSCode 代码提示插件
作为前端开发者一定用过VsCode这款利器,而其强大的插件能力无疑更是让我们深深的爱上了它。据不完全统计,VsCode插件市场中的插件数量已经超过了3万,由此可见大家的热情有多高。其中涉及到各种各样功能的插件,有主题曲相关的,有代码开发相关的,比如代码片段、Git插件、tslint等等。作为开发者,肯定用过各种各样的代码提示的插件,代表性的有TabNine、Copilot等等。今天就让我们来自己动手,开发一款专属的代码提示插件。毕竟别人的再好也是别人的, 属于自己的才是最好的。
2848 1
开发一款专属的 VSCode 代码提示插件
SVG VSCode 插件(语法提示补全、预览插件)
SVG VSCode 插件(语法提示补全、预览插件)
1427 0
VSCode KoroFileHeader 注释插件(支持多种语言,可自定义)
VSCode KoroFileHeader 注释插件(支持多种语言,可自定义)
425 0
|
前端开发 JavaScript API
前端封装库/工具库的编辑器之CKEditor
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,CKEditor 是一个备受欢迎的 JavaScript 富文本编辑器库。
210 0