Nesting custom containers #188

New Issue

claunia · 2026-01-29T14:29:51Z

claunia commented

2026-01-29 14:29:51 +00:00

Originally created by @macaba on GitHub (Jan 31, 2018).

I've had a play around to see if nested custom containers works.
(Spoiler: I don't think it does, by design.)

Example markdown:

:::{.row}
::::{.col-md-6}
Left half
::::
::::{.col-md-6}
Right half
::::
:::

The undesired result:

<div class="row">
<div class="col-md-6"><p>Left half</p>
</div>
</div>
<div class="col-md-6"><p>Right half</p>
</div>
<div></div>

The hypothetical desired result:

<div class="row">
<div class="col-md-6"><p>Left half</p>
</div>
<div class="col-md-6"><p>Right half</p>
</div>
</div>

I'm just putting the finishing touches to an (unrelated) new extension so I am getting familiar with the extension methodology therefore I had a quick look at the custom container extension and couldn't see any explicit functionality that would enable nested containers.

Is this something that could be added easily? Does it make sense to add it?

Originally created by @macaba on GitHub (Jan 31, 2018). I've had a play around to see if nested custom containers works. (Spoiler: I don't think it does, by design.) Example markdown: ``` :::{.row} ::::{.col-md-6} Left half :::: ::::{.col-md-6} Right half :::: ::: ``` The undesired result: ``` <div class="row"> <div class="col-md-6"><p>Left half</p> </div> </div> <div class="col-md-6"><p>Right half</p> </div> <div></div> ``` The hypothetical desired result: ``` <div class="row"> <div class="col-md-6"><p>Left half</p> </div> <div class="col-md-6"><p>Right half</p> </div> </div> ``` I'm just putting the finishing touches to an (unrelated) new extension so I am getting familiar with the extension methodology therefore I had a quick look at the custom container extension and couldn't see any explicit functionality that _would_ enable nested containers. Is this something that could be added easily? Does it _make sense_ to add it?

claunia added the question label 2026-01-29 14:29:51 +00:00

claunia closed this issue

2026-01-29 14:29:52 +00:00

claunia commented

2026-01-29 14:29:53 +00:00

@xoofx commented on GitHub (Jan 31, 2018):

You control the nesting with different number of characters, but in reverse order of what you tried:

::::{.row}
:::{.col-md-6}
Left half
:::
:::{.col-md-6}
Right half
:::
::::

Should give you the following (on babelmark)

<div class="row">
  <div class="col-md-6">
    <p>
      Left half
    </p>
  </div>
  <div class="col-md-6">
    <p>
      Right half
    </p>
  </div>
</div>

As you can see it is matching the behavior of pandoc, so the current design should hopefully be fine.

@xoofx commented on GitHub (Jan 31, 2018): You control the nesting with different number of characters, but in reverse order of what you tried: ``` ::::{.row} :::{.col-md-6} Left half ::: :::{.col-md-6} Right half ::: :::: ``` Should give you the following (on [babelmark](https://babelmark.github.io/?text=%3A%3A%3A%3A%7B.row%7D%0A%3A%3A%3A%7B.col-md-6%7D%0ALeft+half%0A%3A%3A%3A%0A%3A%3A%3A%7B.col-md-6%7D%0ARight+half%0A%3A%3A%3A%0A%3A%3A%3A%3A)) ```html <div class="row"> <div class="col-md-6"> <p> Left half </p> </div> <div class="col-md-6"> <p> Right half </p> </div> </div> ``` As you can see it is matching the behavior of pandoc, so the current design should hopefully be fine.

claunia commented

2026-01-29 14:29:55 +00:00

@macaba commented on GitHub (Jan 31, 2018):

Thank you. The ordering seems a little odd but it works and I'm happy to use it.

As an aside, I don't get the nice indentation that babelmark seems to give:
(Using the exact example you gave)

<div class="row">
<div class="col-md-6"><p>Left half</p>
</div>
<div class="col-md-6"><p>Right half</p>
</div>
</div>

I'm guessing I'm missing an option somewhere?

@macaba commented on GitHub (Jan 31, 2018): Thank you. The ordering seems a little odd but it works and I'm happy to use it. As an aside, I don't get the nice indentation that babelmark seems to give: (Using the exact example you gave) ```html <div class="row"> <div class="col-md-6"><p>Left half</p> </div> <div class="col-md-6"><p>Right half</p> </div> </div> ``` I'm guessing I'm missing an option somewhere?

claunia commented

2026-01-29 14:29:55 +00:00

@xoofx commented on GitHub (Jan 31, 2018):

Thank you. The ordering seems a little odd but it works and I'm happy to use it.

That's because the parser is using the same logic than fenced code blocks where you can close a fenced block with more chars than the opening. That's why :::: was somewhat closing also the first row. So the ordering is consistent with the way fenced blocks are working. Pandoc is using the same logic, so It is likely the right consistent convention.

I'm guessing I'm missing an option somewhere?

No, it is just that babelmark is using an HTML parser after to reformat/normalize the output.

@xoofx commented on GitHub (Jan 31, 2018): > Thank you. The ordering seems a little odd but it works and I'm happy to use it. That's because the parser is using the same logic than fenced code blocks where you can close a fenced block with more chars than the opening. That's why `::::` was somewhat closing also the first row. So the ordering is consistent with the way fenced blocks are working. Pandoc is using the same logic, so It is likely the right consistent convention. > I'm guessing I'm missing an option somewhere? No, it is just that babelmark is using an HTML parser after to reformat/normalize the output.

claunia commented

2026-01-29 14:29:55 +00:00

@macaba commented on GitHub (Jan 31, 2018):

Thank you again!

I'm enjoying developing for Markdig and I hope to have an interesting Markdig extension published soon...

@macaba commented on GitHub (Jan 31, 2018): Thank you again! I'm enjoying developing for Markdig and I hope to have an interesting Markdig extension published soon...

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#188