CODEWITHSUNDEEP
javascriptsasssyntax-highlightingnpm-packagehighlight.js
Chiara Ani
Chiara Ani

Reputation: 1083

How can I syntax hightlight SASS with Javascript?

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

Upvotes: 0

Views: 228

Answers (2)

Chiara Ani
Chiara Ani

Reputation: 1083

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)

Upvotes: 0

0stone0
0stone0

Reputation: 44029

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>

Upvotes: 2

Related Questions