feat: syntax coloring

[Tahul]

Syntax coloring discussions should happen here. 😊

[farnabaz]

Imported from Slack conversation

highlighting optional Yaml data in the blew syntax seems impossible

::block-hero
data: yaml data
---
default slot
---title
The Jamstack Website Generator.
::

We use ending --- to detect wether above content should parse as Yaml data or not

But this kind of logic does not support in language grammars

They simply does not support backtracking, for simplicity and performance issues

An alternative would be to change data syntax to something like front matters syntax

::block-hero
---
data: yaml data
---
this will become default slot
---title
The Jamstack Website Generator.
::

Here is the proposal structure with coloring

[Atinux]

I see, that makes total sense.

What about:

::block-hero
---
data: yaml data
---
[default] (optional)
This is the default slot
[title]
The Jamstack Website Generator.
::

Using [slot]\n to detect the slot might be easier and less confusing

[Tahul]

Great idea; I also though that mixing the same syntax for props & slots was going to be confusing.

I like using [].

As we are delimitating content; I also though about this (unsure if possible):

::block-hero
---
data: yaml data
---

#default (optional)
This is the default slot

#title
The Jamstack Website Generator.

::

Note that # is the official shortcut for slots inside of Vue.

https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand

[Atinux]

I like it even more :fire:

Would that be possible @farnabaz ?

[farnabaz]

Absolutely 👍

[farnabaz]

I will create a PR for parser too

[ManUtopiK]

Also, have you considerd the ugly markup with naive markdown parser caused by the ---? I explain it in this issue https://github.com/docusgen/issues/issues/8