# Nestes HTML output for custom language

**URL:** https://discuss.codemirror.net/t/nestes-html-output-for-custom-language/7738
**Category:** v6
**Created:** [January 21, 2024, 7:01pm UTC](https://discuss.codemirror.net/t/nestes-html-output-for-custom-language/7738 "2024-01-21T19:01:25Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Daroocky](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/daroocky/32/4122_2.png) [@Daroocky](https://discuss.codemirror.net/u/Daroocky)
#### Post date: [January 21, 2024, 7:01pm UTC](https://discuss.codemirror.net/t/nestes-html-output-for-custom-language/7738/1 "2024-01-21T19:01:25Z")

</div>

Hey,

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

```auto
@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:

```auto
<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:

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

```

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [January 21, 2024, 7:16pm UTC](https://discuss.codemirror.net/t/nestes-html-output-for-custom-language/7738/2 "2024-01-21T19:16:53Z")

</div>

No. But you can use the `"Node/..."` syntax to [`styleTags`](https://lezer.codemirror.net/docs/ref/#highlight.styleTags) to add a style to all tokens within a node.

---

<div class="post-metadata">

### Author: ![Daroocky](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/daroocky/32/4122_2.png) [@Daroocky](https://discuss.codemirror.net/u/Daroocky)
#### Post date: [January 21, 2024, 11:23pm UTC](https://discuss.codemirror.net/t/nestes-html-output-for-custom-language/7738/3 "2024-01-21T23:23:45Z")

</div>

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:

```auto
@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!