how to create observablehq/lezer work on codemirror 6

Hi Marinjh, and all,

I am in developing codemirror that can implement observablehq script.
I know that observablehq have observablehq/codemirror.next and observablehq/lezer.
I have bundle it and it works but it doesn’t have defaultTabBinding like on the latest version of codemirror 6.

And the a have tried also to bundle obvervablehq/lezer to the latest version of codemirror 6 by applying this lezer as parser into lang-javascript, it works but it doesn’t treat special observablehq library keyword like viewof, html, md, mutable, etc with colorful words.

Would you please tell me what is wrongs and how is the right way to bundle it.

What i have done are just replacing the source of parser path in javascript.js under lang-javascript module.

import { parser } from <the path of observablehq lezer>

Thanks

I’m not familiar with the observable CodeMirror-related libraries, but I’d expect them to just be extensions that can be used with the current versions of @codemirror libraries on npm. https://github.com/observablehq/codemirror.next seems to be an old old fork that you probably shouldn’t be using.

Yes, that extension (@observablehq/lezer) is works like a charm in the latest codemirror version, but i want to style some of special words like md, html, viewof, and mutable with for example red color,

how can i do that?
I know there are guidance on styling tag, but i don’t understand how to implement this in my codes.

Thanks in advance

Either adjust the language mode, or use something like MatchDecorator to just match the text of the words (though that’ll also match them inside of strings and comments etc).

What do you mean with adjust the language mode?
I already set the language with observablehq/lezer.

However, i tried to add the variable name into styleTags under tags.keyword
and this is works, but is it the correct way?