bent10 / marked-extensions

Marked extensions workspace
https://www.npmjs.com/search?q=keywords:stilearning-marked-extensions
MIT License
32 stars 5 forks source link

Support for nested container directives #110

Closed enagy27 closed 2 weeks ago

enagy27 commented 2 weeks ago

Use case

I'm trying to parse the following markdown:

:::carousel

::::carousel-slide
Title
Description

![Image](/image.jpg)
::::

:::

This is something that's proposed by the directive spec but I can't seem to get this to work currently.

Proposal

I think the best way to have it be supported would be to add a $ to the end of the result of getDirectivePattern for container level directives.

This solution would still mean having to explicitly declare separate markers for each level of nesting, but it should make it possible to nest.

enagy27 commented 2 weeks ago

I may actually have misread the spec? It looks like other implementations expect that the outer elements have more colons than the inner elements, which would work with the current implementation:

::::carousel

:::carousel-slide
Title
Description

![Image](/image.jpg)
:::

::::

This would make sense with the greediness of regular expressions. Though that could still pose challenges because the extensions would currently need to be applied in order where the inner elements need to be defined first (3 colons) and then the outer elements (4+ colons).

If that's the case, perhaps this would just be best as a documentation update with some clarification on the spec similar to micromark-extension-directive and a couple of levels of nesting included or instructions on how to add nesting configs.

bent10 commented 2 weeks ago

Thanks for bringing this up!

You're right—the directive spec supports nesting by using more colons for the outer container. Your second example with 4 colons for carousel and 3 colons for carousel-slide is the correct approach.

Alternatively, you can also use different markers for each level. For example, the .container uses colons (:::), and the .item uses plus signs (+++):

:::{.container}

+++{.item}

### Title

Content ![Image](/image.jpg), with code:

```python
num1 = 5
num2 = 3
sum = num1 + num2
print(f"The sum of {num1} and {num2} is {sum}")

+++

:::



I will update the documentation with examples to clarify this nesting behavior.

Sorry for the delay! I’ve been struggling to find time to review it.
enagy27 commented 2 weeks ago

Not at all! Thank you for clarifying that and for updating the docs 🙏