建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS代码高亮插件SyntaxHighlighter

来源:易助科技网浏览量:51收藏

简介


SyntaxHighlighter是一款完全基于Javascript的代码高亮插件,可以对大部分编程语言进行着色渲染,而且代码高亮的性能也非常不错。它既可以在纯浏览器端,也可以在服务端使用。还可以自定义主题文件,支持复制、在新窗口查看源代码等较多的可选功能。


简单使用

1.  引入文件


<link rel="stylesheet" href="static/css/sunburst.min.css">

<script src="static/js/jquery.min.js"></script>
<script src="static/js/highlight.min.js"></script>


上述调用将会检索所有 <pre><code> 标签并对其中内容进行代码高亮处理,它会尝试自动检测语言。如果语言自动检测失败,又或者你想明确指定语言,那么可以使用 class 进行手动指定:


<pre><code class="language-html">...</code></pre>


对于纯文本,若要想应用 Highlight.js 的样式,而又不对文本内容进行高亮显示,请使用 plaintext 语言:


<pre><code class="language-plaintext">...</code></pre>


使用 nohighlight class 可以完全跳过本插件所有的处理,保持 code 标签原本的样式:


<pre><code class="nohighlight">...</code></pre>


2. 调用

1)基本用法,即在浏览器页面中使用:


<script type="text/javascript">
  hljs.highlightAll();
</script>


2)服务端 Node.js:


<script type="text/javascript">
  // load the library and ALL languages
  hljs = require('highlight.js');
  html = hljs.highlightAuto('<h1>Hello World!</h1>').value
</script>


3)添加行号:

引入行号插件:


<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>


调用


<script type="text/javascript">
  hljs.highlightAll();
  hljs.initLineNumbersOnLoad();
</script>



相关链接:

中文文档 地址 :  http://highlight.cndoc.wiki/doc

官网地址 : https://highlightjs.org

GitHub 地址 :https://github.com/syntaxhighlighter