CODEWITHSUNDEEP
javascriptcsslexercodemirror
Martin Kool
Martin Kool

Reputation: 4245

How to style nested code blocks in CodeMirror 3

Using CodeMirror 3.18 I want to be able to visualize the scope depth of a user's code block as overlay of the regular styling that involves keywords, atoms and such.

So in the following example I've commented what extra layer of classNames I'd like to have:

if (happy) { // mark overlay depth 2 from here
    if (knowIt) { // mark overlay depth 3 from here
        clapYourHands(); // still 3 here
    } // back at depth 2
} // back at 1

Do I need to write my own lexer for this, or is it possible to extend the existing (javascript) hint script?

Preferrably I'd like to have these classes doubled on each line. My aim (may you be interested) is try to see if I can approach a visualization like Scratch:

enter image description here

Upvotes: 0

Views: 378

Answers (1)

Marijn
Marijn

Reputation: 8929

You'll have to write your own mode, but it might be workable to write it as a wrapper around the JavaScript mode--let that do the tokenization and basic styling, with your wrapper adding extra styles based on the context (it could count braces, or simply inspect the context in the JavaScript mode's state).

Upvotes: 2

Related Questions