# CM6 – custom highlighting using MatchDecorator

**URL:** <https://discuss.codemirror.net/t/cm6-custom-highlighting-using-matchdecorator/3217>\
**Category:** v6\
**Created:** [May 23, 2021, 2:04pm UTC](https://discuss.codemirror.net/t/cm6-custom-highlighting-using-matchdecorator/3217 "2021-05-23T14:04:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![martinsnajdr](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/m/57b2e6/32.png) [@martinsnajdr](https://discuss.codemirror.net/u/martinsnajdr)\
**Post date:** [May 23, 2021, 2:04pm UTC](https://discuss.codemirror.net/t/cm6-custom-highlighting-using-matchdecorator/3217/1 "2021-05-23T14:04:44Z")

</div>

I’m trying to create a basic syntax highlighting to work with Laravel Blade template language (on top of HTML language). Found just an example how to create some custom highlighting using MatchDecorator, but it’s too simple for what I need.

I think I understand the way MatchDecorator works, but I need an advice for a more complex usage.

Let’s say I need to highlight this string:

```
@if ( $value === 'something' )

```

I want to highlight @if / $value / ‘something’ using different classes (colors). Is it possible to achieve it using one single MatchDecorator, or what is the right way in CM6 to do it? Create multiple MatchDecorators with different regular expressions and somehow combine it into a single ViewPlugin?

What I have right now is a single MatchDecorator that is able to highlight @if using a tags.typeName class (so I’m using the built-in classes), but I’m stuck because I can’t find any other example how to create more complex highlighting.

Thanks for any advice.

---

<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:** [May 24, 2021, 8:11am UTC](https://discuss.codemirror.net/t/cm6-custom-highlighting-using-matchdecorator/3217/2 "2021-05-24T08:11:01Z")

</div>

No, `MatchDecorator` isn’t going to be much use for syntax highlighting. See [this example](https://codemirror.net/6/examples/lang-package/) for a walkthrough of the way language packages are written.

---

<div class="post-metadata">

**Author:** ![martinsnajdr](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/m/57b2e6/32.png) [@martinsnajdr](https://discuss.codemirror.net/u/martinsnajdr)\
**Post date:** [May 24, 2021, 12:43pm UTC](https://discuss.codemirror.net/t/cm6-custom-highlighting-using-matchdecorator/3217/3 "2021-05-24T12:43:24Z")

</div>

Thank you for your response.

Building a completely new language is not necessary in my case, because I just need some extra highlighting rules inside a HTML code.

I guess this thread describes similar “problem” (found it later).

> [@Example for template language support](https://discuss.codemirror.net/t/example-for-template-language-support/3215/2):
>
> I’m working on exactly that problem right now, but it’s somewhat involved and it might be a while until I have something usable. So at the moment there’s no real way to work with such languages in CM6.

Similar to the CM5 overlay mode. But I see you said you are working on it, so I will wait for some updates 😉