markdown-it / markdown-it-container

Fenced container plugin for markdown-it markdown parser
MIT License
499 stars 75 forks source link

Nested containers don't work #6

Closed camelaissani closed 8 years ago

camelaissani commented 8 years ago

Hello,

The nested containers seem to not work :disappointed:

::: header

# My company

::: address
@street1

@street2

@zipCode @city

@country
:::

::: contact
Phone number: @phone1 @phone2

E-mail: @email
:::

:::

It displays ::: after E-mail: @email and header container doesn't contain address, contact containers.

Thanks

puzrin commented 8 years ago

http://spec.commonmark.org/0.25/#fenced-code-blocks

Use the same principle as in fenced block for nested things - add more : for outer block start/end.

camelaissani commented 8 years ago

yeah it works! thanks!

Jonarod commented 7 years ago

This shouldn't be the opposite ? The docs you linked to doesn't reference any specs regarding nested fenced code blocks (or maybe you meant to link another section I've missed ?). It is quite strange for me to add : on OUTER blocks: I find it way more natural to add : INSIDE.

Indeed, let's say I start my Markdown like this:

::: section
This will be a 
long 
long 
long
SECTION
very 
long
:::

Then, within that :::section::: I need another block. Then inside of this block I will need another one etc... Each time I need another block, I will have to go back to add more : to outer elements.... That's a bit strange and I think it goes against the whole markdown philosophy which is basically to HELP WRITERS formatting content. The best approach, in my opinion, would be to naturally add more : as I write inside a first :::section:::. Like:

::: section1
This will be a 
long 
long 
long
:::: section2
SECTION2 INSIDE SECTION1
:::::: section3
SECTION3 INSIDE SECTION2
:::::::section4
YAY, I don't need to go and modify previous elements
:::::::
::::::
::::
very 
long
:::

Is there a way to reverse this approach using markdown-it-container or is it just impossible and I am crazy ?? :P

puzrin commented 7 years ago

http://spec.commonmark.org/0.25/#example-91

Use http://spec.commonmark.org/dingus/ or https://markdown-it.github.io/ to play with nested fenced blocks. This package works the same way.

No, i do not plan to reverse border length for nested blocks. But nobody can prohibit you to create new plugin, based on this one's source.

Jonarod commented 7 years ago

I try to make this input to work:

::::row
::::::::::col
col1
::::::::::
::::::::::col
col2
::::::::::
:::::

which I think is visually more understandable. So I decided to deem the tokens[idx].nesting in favor of testing if the token ::: has an info on it or not, using tokens[idx].info. Something like this:

.use(require('markdown-it-container'), 'classname', {
  validate: name => name.trim().length,
  render: (tokens, idx) => {
    if (tokens[idx].info.trim() !== "") {  // if the token has info, then this is the start of a new div
      return `<div class="${tokens[idx].info.trim()}">\n`;
    } else  {   // if no info, then this is a closing div
      return '</div>\n';
    }
  }
}); 

Translating that code with my markdown, should render as follow:

::::row            <div class="row">
::::::::::col          <div class="col">
col1                     <p>col1</p>
::::::::::               </div>
::::::::::col          <div class="col">
col2                     <p>col2</p>
::::::::::             </div>
:::::              </div>

however it does not render this way, rather, here is the output:

<div class="row">
     <div class="col">
           <p>col1</p>
      </div>
</div> // THIS CLOSING DIV COME IS MISPLACED  ????? SHOULDN'T IT BE AT THE END ??

<div class="col">
          <p>col2</p>
</div>
<p>:::</p>  // WTF ???

clearly I am missing something, but I am afraid I can't see what: any idea ? :)

Jonarod commented 7 years ago

@puzrin Thank you for your prompt reply.

Use http://spec.commonmark.org/dingus/

If you test this :

~~~~
~~~
test
~~~
~~~~

you will see it does NOT nest the fenced block correctly in Dingus, rather it escapes the sub-level ~~~, this is not quite the use case.

puzrin commented 7 years ago

It works as required - recognizes ~~~ as part of inner, not as block end

In your example, this is exact inner to show as text:

~~~
test
~~~
windmaomao commented 6 years ago

nested probably won't ever work. I see the source code.

    nextLine = startLine;

    for (;;) {
      nextLine++;

the interesting thing is that Markdown-It isn't a xml parser as I first thought.

danielesavasta commented 3 years ago

Sorry I have been trying the nested div without success. Is this issue solved or not?

I tried as follow:

::::container
:::nested div
content
:::
::::
jackmorizo commented 2 years ago

Have you tried adding empty lines? This works for me.

::::md-row

:::md-col-3
lorem ipsum
:::

:::md-col-2-3
lorem ipsum
:::

::::