Nesting of different containers

[StefanZander]

First of all, I really like this extension and use it in combination with marp for creating (my) lecture slides.

Here is my question: Is there a possibility to allow the nesting of different containers or can this extension be extended to enable that?

As an example, I want to create something like the following:

::: 2-columns ::: left-column ...content ::: ::: right-column ...content ::: :::

The sweet spot here is that multi-columns can be implemented in markdown slides using the flexbox-module where the "2-columns"-div is the parent container and "left-" and "right-column" its flexbox items.

[puzrin]

See https://github.com/markdown-it/markdown-it-container/issues/33#issuecomment-551111227

Principle is exactly the same as with fenced blocks. Use different length in guards.

[StefanZander]

Thanks, that solved my problem!

Here is my solution

:::: columns
::: 1st-col
content
:::
::: 2nd-col
content 
:::
::::

Many thanks also for the fast response!

[xu4wang]

@StefanZander would you mind sharing your css file for columns and 1st-col, 2nd-col etc.

I'm trying to have multiple columns working for Markdown PDF in VS Code. but I'm a new comer to CSS..

Thanks.

Thanks, that solved my problem!

Here is my solution

:::: columns
::: 1st-col
content
:::
::: 2nd-col
content 
:::
::::

Many thanks also for the fast response!

[StefanZander]

@xu4wang: Here is my (modified) solution; it gives you more flexibility compared to the first solution:

CSS:

/* Use this for flexible columns */
.columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 2em;
}

/* determines the relative width of a single column */
.single {
    flex: 1 1;
}

.double {
    flex: 2 1;
}

.triple {
    flex: 3 1;
}

.quad {
    flex: 4 1;
}

Markdown:

::::: columns
:::: double <!-- first column has double relative width (ie 2/3 of total width) -->
::::
:::: single <!-- second column has single relative width (ie 1/3 of total width) -->
::::
:::::

Edit: This also allows for 3-/4-columns views; just add another '::::single' etc. markup tag.

[xu4wang]

@xu4wang: Here is my (modified) solution; it gives you more flexibility compared to the first solution:

Thanks @StefanZander .. your updated solution is very flexible.