Is there a straightforward way to set CSS for a particular mode?

I’m looking to build a small editor for a pair of nested modes – basically wikitext that can contain code that can contain wikitext again, etc. Neither is terribly complex, but they’re essentially unrelated languages, nested with delimiters. (Likely implementing this with the Multiplexing Add-On, which looks like a good fit, but I haven’t tried it yet.)

I would strongly like to display the two languages in distinct fonts (and possibly display with code sections with a slightly tinged background color), to improve glanceability of what’s what.

So my question is, is there a straightforward way to do this? I could probably use markText if need be, but that seems fairly complex for the very broad-strokes desire. Basically, I’m trying to figure out the best way to mark everything inside a given mode with a particular class, separately from the usual token-oriented classes.

Lower-priority, but while I’m asking: can CodeMirror cope with variable-width fonts? Ideally (I think; we’ll see), the wikitext would be rendered in a variable-width sans-serif, and the code would be rendered in monospace. This seems likely to work, but I might as well ask before spending time on it…

I think the addModeClass option should make this quite easy.

Absolutely.

1 Like

Sounds like exactly what I was looking for. Thanks!