Simle text highlight for StreamLanguage isn't working

lvmk · April 2, 2025, 9:07pm

Hello!
I’m trying to add a simple highlight to my text editor. It should simply highlight bracers, nested bracers, and lora:name tags. To be honest I’m a newbie here and in JS as well.
Adding a custom language with StreamLanguage, customHighlightStyle and some custom tags was looking as good idea but, nothing works yet.. I’m facing errors like Unknown highlighting tag level1Brace each time. I didn’t find any sample that can demonstrate how to properly create and use custom tags with tokens…

I also tried to remove customHighlightStyle and replace it with a custom theme, but it had no effect.
I’ve seen that it is possible to create a language with LRLanguage and lezer, but it looks overcomplicated for this task, and I don’t have enough experience completing it.

I feel like I’m missing something simple. Can someone shed some light on it, please?

Don’t think that attaching the whole file is a good idea - here is the reference to the editor’s file:

github.com/alexandersokol/sd-prompt-lab

editor/main.js

codemirror

import {
    EditorView, keymap, highlightSpecialChars, drawSelection,
    highlightActiveLine, dropCursor, rectangularSelection,
    crosshairCursor, lineNumbers, highlightActiveLineGutter
} from "@codemirror/view";
import {EditorState} from "@codemirror/state";
import {oneDark} from "@codemirror/theme-one-dark";
import {
    autocompletion, completionKeymap, closeBrackets,
    closeBracketsKeymap
} from "@codemirror/autocomplete";
import {
    defaultHighlightStyle, syntaxHighlighting, indentOnInput, StreamLanguage, HighlightStyle,
    bracketMatching, foldGutter, foldKeymap
} from "@codemirror/language";
import {
    searchKeymap, highlightSelectionMatches
} from "@codemirror/search";
import {
    defaultKeymap, history, historyKeymap

This file has been truncated. show original

marijn · April 3, 2025, 5:42am

You appear to be using deprecated packages like @codemirror/highlight . Maybe the problem stems from having an old version of @codemirror/language installed as well. When I try this script (dropping the @codemirror/highlight imports, using @lezer/highlight for Tag instead), it works fine.

lvmk · April 3, 2025, 11:52am

Thank, you!
I fixed the imports, cleared re-install dependencies. But it still not working.
I spotted that in inpsect, I have some random class names for syntax (<lora:123>), as I understand the classes are generated with random names, and I expected them to be mapped within “CustomHighlightStyle”.

I tried to map my tags with tokenTable to default tags (import {tags as defaultTags} from “@lezer/highlight”) like: defaultTags.brace, defaultTags.paren, ets - but the class names were still random-generated.

Any ideas how to keep class names, or make them properly map?

lvmk · April 3, 2025, 12:44pm

I found out that in online editor everyting works absolutely fine, even with generated class names.
(link)

Might it be the issue have to bundle my code to be able to use it without external dependencies?

marijn · April 3, 2025, 4:21pm

You can use static class names (see for example classHighlighter), but it is recommended to just allow the highlight extension to take care of the class names.

If you’re using a CDN for the CodeMirror packages, that’s probably the issue. Those will generally serve you a bunch of different versions of a package.

lvmk · April 3, 2025, 6:54pm

Thank you!
It works perfectly!