SCSS syntax highlighting

support
1

I’m finding that the highlighting of code blocks is a bit bland when it comes to SCSS. Selectors, keys and values are all the same colour.
The page markdown file looks like

```scss
// Navigation bar
nav {
    ul {
        border-top: 2px solid $text-primary;
        border-bottom: 2px solid $text-primary;
        display: flex;
        list-style: none;
        margin: 0 -30px;

        li {
            padding: 5px 0;
            margin: 0;
        }
    }
}
```

And it comes out looking like this:
Screenshot_20190601_153821

All one colour. Compared with how CSS is highlighted:
Screenshot_20190601_153917

This is using the “monokai” theme.
Using version v0.54.0-B1A82C61A/extended and my config.toml has

pygmentsCodeFences = true
pygmentsStyle = "monokai"
pygmentsUseClasses = true

Together with a syntax.css file in my static/css folder.

Is there a style or setting I can use to get a bit closer to what I see in VSCode with a dark theme?
Screenshot_20190601_154516

2

Why not mark it as CSS instead SCSS?

3

CSS still isn’t quite right - variable declarations are all one colour, nested selectors and variable references are marked as errors.

Screenshot_20190602_110933

Screenshot_20190602_111002

4

Did you ask at the source? Maybe they would know of a better “theme” to choose.