Hello! I’m trying to use HighlightStyle.define and tags to create a theme like this, where fnProp and fnVariable are styled in a different way:
I would expect [tags.function(tags.variableName), tags.function(tags.propertyName)] would do the job, but it’s not working. Not sure if it’s a bug. This was the best result I could get, but it doesn’t look consistent:
The JavaScript language mode doesn’t assign different tags to those properties, so you can’t style them differently with a HighlightStyle. In fact, since their syntax tree context is identical, there’s not really a way to assign different tags to them, so this is not something the system supports.
Thanks for the reply. It looks like prismjs is able to detect that syntax (my first screenshot is from an element using prismjs). Maybe we can learn something from that?
By the way, is it possible to use CodeMirror 6 and prismjs together? Leveraging the editing capabilities of CM and the highlight of Prismjs?
No, that’s not something that exists at the moment.
Hooking up Prism to CM6 is perfectly possible, I should add. The issue with doing so would probably be just speed; while Prism is fast, running it on every keystroke probably isn’t going to be.
There would be other problems, too. A significant one would be that the editor would probably have a fairly awful (comparatively) syntax tree to work with. I doubt code folding or indentation would be practical. The syntax tree structure CM6 uses is really helpful in getting features like complex code indentation working without hacky solutions.