Closed StefanZander closed 4 years ago
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.
Thanks, that solved my problem!
Here is my solution
:::: columns
::: 1st-col
content
:::
::: 2nd-col
content
:::
::::
Many thanks also for the fast response!
@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!
@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: Here is my (modified) solution; it gives you more flexibility compared to the first solution:
Thanks @StefanZander .. your updated solution is very flexible.
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.