Nestes HTML output for custom language

v6
1

Hey,

i created my own language with Lezer that looks something like that:

@top Program {
    ((Text+) end)*
 }

Formatter {
  Bold |
  Italic |
  Underline
}

textLine {
  Text |
  Formatter |
}

Bold { "*" Text "*" }
Italic { "/" Text "/" }
Underline { "_" Text "_" }

@tokens {
  Text { (![*/_{}\[\]\t\n\r])+ }
}

@detectDelim

the html output of the codemirror editor looks like this:

<div class="cm-line">
<span class="text">Some </span>
<span class="bold">*</span>
<span class="text">Text</span>
<span class="bold">*</span>
<span class="text">! </span>
</div>

That’s fine, but I want to style the text within the bold part. At the moment this is not possible because the html is not nested. Is there any way I can get codemirror to nest siblings? So that the HTML looks something like this:

<div class="cm-line">
<span class="text">Some </span>
<span class="bold">* <span class="text">Text</span> *</span>
<span class="text">! </span>
</div>
2

No. But you can use the "Node/..." syntax to styleTags to add a style to all tokens within a node.

1 Like
3

Hey

Thanks for the quick reply! That actually solved my problem. But now I have another problem with the nesting of the grammar.

I have the following grammar:

@top Program {
    Content
 }

 Format {
    Bold { '*' Content '*' } |
    Italic { '/' Content '/' }
 }

 Content {
    (Format | Text)*
 }

@tokens {
  Text { (![*/_{}\[\]\t\n\r])+ }
}

This should make it possible that e.g. a text in bold can also be written in italics at the same time. But then I get a shift/reduce conflict. Is there any way to solve this?

– Edit —

Ah I got it, I needed a @precedence rule!