如何使用JavaScript通过highlight.js实现SASS代码语法高亮？

问题现象 #

使用Highlight.js的NPM包时，SASS代码无法被语法高亮，CSS代码则正常显示高亮。控制台输出以下警告：

WARN: Could not find the language 'sass', did you forget to load/include a language module?
WARN: Falling back to no-highlight mode for this block. <code class="language-sass">
a
  text-decoration: none
 </code>

复现代码 #

HTML部分 #

<script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/nnfx-dark.min.css">

<p>SASS无法高亮：</p>
<pre>
 <code class='language-sass'>
a
  text-decoration: none
 </code>
</pre>

<p>CSS可以正常高亮：</p>
<pre>
 <code class='language-css'>
a {
  text-decoration: none
 }
 </code>
</pre>

JS部分 #

hljs.highlightAll();

解决方案 #

采用ES模块方式导入Highlight.js核心库，手动导入并注册SASS语言模块，代码如下：

import 'highlight.js/styles/nnfx-light.css'
import hljs from 'highlight.js/lib/core'

import sass from 'highlight.js/lib/languages/sass'
hljs.registerLanguage('sass', sass)

hljs.highlightAll();

关键说明 #

• highlight.js/lib/core是Highlight.js的核心包，默认不包含任何语言语法模块，必须手动导入对应语言并完成注册
• 导入SASS语言模块后，通过hljs.registerLanguage完成注册，即可正常识别标注language-sass类的代码块并实现高亮

内容的提问来源于stack exchange，提问作者Chiara Ani