CodeMirror 6 language support for rics
npm install codemirror-lang-rics
CodeMirror 6 language support for rics. Provides syntax highlighting and real-time linting.
``bash`
npm install codemirror-lang-rics
Requires CodeMirror 6 packages:
`bash`
npm install @codemirror/language @codemirror/lint @codemirror/state @codemirror/view
`typescript
import { EditorView, basicSetup } from "codemirror";
import {
ricsLanguage,
ricsLinter,
colorHighlighter,
colorHighlighterStyles,
} from "codemirror-lang-rics";
const editor = new EditorView({
extensions: [
basicSetup,
ricsLanguage(),
ricsLinter({ delay: 300 }),
colorHighlighter(),
colorHighlighterStyles,
],
parent: document.getElementById("editor"),
});
`
Returns a CodeMirror extension for rics syntax highlighting.
`typescript
import { ricsLanguage } from "codemirror-lang-rics";
const extensions = [ricsLanguage()];
`
Returns a CodeMirror linter extension that validates rics code in real-time.
`typescript
import { ricsLinter } from "codemirror-lang-rics";
const extensions = [
ricsLinter({
delay: 300, // Debounce delay in ms (default: 300)
}),
];
`
Alias for ricsLanguage().
Returns a CodeMirror extension that highlights color values inline with their actual color as background.
`typescript
import { colorHighlighter, colorHighlighterStyles } from "codemirror-lang-rics";
const extensions = [
colorHighlighter({
className: "cm-color-preview", // CSS class for preview (default)
lightClassName: "cm-color-preview-light", // Class for light colors
darkClassName: "cm-color-preview-dark", // Class for dark colors
luminanceThreshold: 0.35, // Light/dark text threshold (0-1)
}),
colorHighlighterStyles, // Include default styles
];
`
Supported formats: hex, rgb, rgba, hsl, hsla, hwb, lab, lch, oklch, oklab, color()
Note: Preprocessor variables ($var) and CSS custom properties (var()) are automatically skipped.
Default CodeMirror theme for color previews. Include this alongside colorHighlighter() or define your own styles targeting .cm-color-preview.
- Full syntax highlighting for rics/SCSS syntax
- Variables ($name)&
- Nesting and parent selector ()@mixin
- Mixins and functions (, @function, @include)@if
- Control flow (, @else, @for, @each, @while`)
- Color values and functions
- Real-time error detection
- Inline error markers
- Inline color previews with automatic contrast adjustment
MIT
---
Built by Better Lyrics