Labels in container block directives

[mrwwalmsley]

I'm a Nuxt user for my personal projects, but React for work.

For the past couple of years we have used a similar markdown directive syntax to Nuxt MDC.

After I started using Nuxt MDC in my personal projects, I then tried this plugin with my React work projects. It worked great except for ONE thing. We use labels in many of our container block directives.

::: name[label]{key=val}
contents, which are sometimes further block elements
:::

The Nuxt MDC syntax highlighter doesn't work with container directives as per this spec discussion:
https://talk.commonmark.org/t/generic-directives-plugins-syntax/444

Is that easy to implement?

[atinux]

Could you give an example of using [label]?

We use [] for the content of the component.

[mrwwalmsley]

We have code like this in our educational platform:

:::text_select_activity[jungle_theme]{text_size=small find_all_locations layout=wide wrap=false}
A|M
ABCDEFGHIJKLMNOPQRSTUVWXYZ
:::

The Nuxt syntax highlighter works great... except when you add in the [jungle_theme].
Adding in the [] breaks the syntax highlighting:

Our examples are similar to the spec below:

[atinux]

What do you think @farnabaz ?

[farnabaz]

I think supporting inline content for block components is a bit confusing, it is block so it should expect children inside it's scope.

Also for leaf usage we implemented a self-closing(leaf) block in MDC here
So instead of using ::name[content]{attrs}, it can simply written as. :name[content]{atttr} with single colon.

[mrwwalmsley]

This spec document has been around for 8 years, and was implemented years ago by Remark.

It supports 3 kinds of directives:

1. Inline start with one colon (analogous to spans)
2. Leaf block, start with two colons (analogous to empty divs)
3. Container block, start with at least three colons (analogous to divs containing further blocks)

1. Inline Directive Syntax

:name[content]{key=val}

2. Leaf Block Directives

:: name [content] {key=val}

3. Container Block Directives

::: name [inline-content] {key=val}
contents, which are sometimes further block elements
:::

I'm not too concerned if Nuxt MDC implementation supports both 1 & 2 above, since I am only using it on new projects.

However, it would be great if the Nuxt VSCode plugin syntax highlighter could support all 3 syntaxes, so that the plugin would work correctly for projects using the standard Remark MDC implementation.

https://talk.commonmark.org/t/generic-directives-plugins-syntax/444

While I agree that it is potentially redundant and confusing to allow the label in blocks, I have never-the-less found it useful. Here is an example. While the first syntax is less explicit, it gives an example of the utility of supporting both inline-content and block-content with the same directive.

:::spoiler[Click me to expand]
... content ...
:::

:::spoiler{label='Click me to expand'}
... content ...
:::

:::spoiler
---
label: Click me to expand
---
... content ...
:::

:::spoiler
# label
Click me to expand

# content
... content ...
:::

[mrwwalmsley]

So @farnabaz & @atinux would you suggest that I fork to add support for this feature of the common mark spec?

::: name [inline-content] {key=val}
contents, which are sometimes further block elements
:::

I'm taking it you don't want to support this syntax highlighting since Nuxt3 MCD doesn't support this part of the spec.

Note that I'm using the remark-directives plugin, which fully supports the spec:
https://github.com/remarkjs/remark-directive#readme

[atinux]

You can fork yes @mrwwalmsley