How can I syntax hightlight SASS with Javascript?

Question

I would like to syntax highlight my SASS code with highlight.js NPM package. However, I cannot get it to work.

SASS is not syntax highlighted, and the console displays this warning:

a
  text-decoration: none
 
CSS does work:

a {
  text-decoration: none
 }

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>

You can check it with this snippet:

hljs.highlightAll();

<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<link rel="stylesheet"
      href="//unpkg.com/@highlightjs/[email protected]/styles/nnfx-dark.min.css">

<p>SASS does NOT work:</p>
<pre>
 <code class='language-sass'>
a
  text-decoration: none
 </code>
</pre>

<p>CSS does work:</p>
<pre>
 <code class='language-css'>
a {
  text-decoration: none
 }
 </code>
</pre>

I would like to be able to do it in the next way:

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();

The given code is valid, what is the problem? Please read through the how do I ask a good question?. Please update your question with a minimal reproducible example demonstrating the problem. — Adrian Kokot
– Adrian Kokot, Commented Jul 4, 2023 at 10:10
If you want to use it as es modules you have to install it as npm package, not cdn. Do you have it that way? — Adrian Kokot
– Adrian Kokot, Commented Jul 4, 2023 at 12:21
Yes, I installed the NPM package, but for the snippet I did it this way. — Chiara Ani
– Chiara Ani, Commented Jul 4, 2023 at 13:17
Are you getting some error or something? Because I still don't understand what's not working and why you ask question — Adrian Kokot
– Adrian Kokot, Commented Jul 4, 2023 at 13:23

0stone0 · Accepted Answer · 2023-07-04 15:06:40Z

2

Looking at the Highlight JS Support language list, there is no SASS syntax available.

There is a git issue asking for it, but that only mentions the Stylus syntax which is partly compatible with SASS.

Example with the stylus language:

hljs.highlightAll();

<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<script src="https://unpkg.com/@highlightjs/[email protected]/languages/stylus.min.js"></script>

<pre>
    <code class='language-styl'>
a
    text-decoration: none
  
nav
    ul
        margin: 0
        padding: 0
        list-style: none

    li
        display: inline-block

    a
        display: block
        padding: 6px 12px
        text-decoration: none
    </code>
</pre>

answered Jul 4, 2023 at 15:06

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chiara Ani · Accepted Answer · 2023-07-04 17:43:15Z

0

I found a temporal solution: to register SCSS as SASS with highlight.js NPM package:

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

answered Jul 4, 2023 at 17:43

Chiara Ani

1,13511 silver badges33 bronze badges

Collectives™ on Stack Overflow

How can I syntax hightlight SASS with Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related