highlight.js 代码高亮插件的使用

引入css和js并初始化

<link rel="stylesheet" href="/path/to/styles/default.css"> 
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

默认需要高亮的代码使用<pre><code class=”html”>…</code></pre>包裹

看起来像代码,不需要详细高亮使用class=”plaintext”

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

不使用高亮使用class=”nohighlight”

 

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

 

 

自定义初始化

When you need a bit more control over the initialization of highlight.js, you can use the highlightBlock and configurefunctions. This allows you to control what to highlight and when.

Here’s an equivalent way to calling initHighlightingOnLoad using vanilla JS:

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

For other options refer to the documentation for configure.

自定义初始化指示你可以自定义需要高亮的包裹标签

详细使用方法及配置见https://highlightjs.org/usage/

给highlight.js添加行号

默认highlight.js是没有行号的,需要使用另一个插件“highlightjs-line-numbers”,下载highlightjs-line-numbers.min

引入并初始化

<script src="highlightjs-line-numbers.min.js"></script>
 
<script>
   $(document).ready(function() {
   $('pre').each(function(i, block) {
   hljs.lineNumbersBlock(block);
  });
});
</script>

效果见本文。

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

暂无评论

发送评论 编辑评论


				
上一篇
下一篇