Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested containers don't work #6

Closed
camelaissani opened this issue Apr 23, 2016 · 10 comments
Closed

Nested containers don't work #6

camelaissani opened this issue Apr 23, 2016 · 10 comments

Comments

@camelaissani
Copy link

Hello,

The nested containers seem to not work 😞

::: 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
Copy link
Member

puzrin commented Apr 23, 2016

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
Copy link
Author

yeah it works! thanks!

@Jonarod
Copy link

Jonarod commented Sep 30, 2017

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
Copy link
Member

puzrin commented Sep 30, 2017

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
Copy link

Jonarod commented Sep 30, 2017

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
Copy link

Jonarod commented Sep 30, 2017

@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
Copy link
Member

puzrin commented Sep 30, 2017

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
Copy link

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
Copy link

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
Copy link

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

::::md-row

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

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

::::

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants