vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

Cannot render nested Custom Containers properly. #3707

Closed ThalyssonLeite closed 1 month ago

ThalyssonLeite commented 1 month ago

Describe the bug

This is a very simple, perhaps underrated problem, but is so annoying. I cannot put more than one custom container inside another custom container.

The best I can get is to put just one custom container inside the other:

::: info Fields To Update
::: details **Trade Name** - *String*
The name used commercially by the company, which appears in logos and advertising, the name known by the majority of its costumers.
:::

Screenshot from 2024-03-27 10-01-34

Nothing more, still this is unnatural, if a put the ending ::: those are rendered as text, as follows:

::: info Fields To Update
::: details **Trade Name** - *String*
The name used commercially by the company, which appears in logos and advertising, the name known by the majority of its costumers.
:::
:::

Screenshot from 2024-03-27 10-10-35

Reproduction

When I try to do that nesting with this code:

::: info Fields To Update
::: details **Trade Name** - *String*
The name used commercially by the company, which appears in logos and advertising, the name known by the majority of its costumers.
:::
::: details **Registration Document** - *String*
The sequence of numbers or numbers and letters that identify a company. Every country has its own standard for its companies registration documents. For examples, in Brazil it's called CNPJ while in the United States it's called TIN.
:::
:::

and

::: info Fields To Update
    ::: details **Trade Name** - *String*
    The name used commercially by the company, which appears in logos and advertising, the name known by the 
    majority of its costumers.
    :::
    ::: details **Registration Document** - *String*
    The sequence of numbers or numbers and letters that identify a company. Every country has its own standard for its 
    companies registration documents. For examples, in Brazil it's called CNPJ while in the United States it's called TIN.
    :::
:::

The resulting render is:

Screenshot from 2024-03-27 10-06-59

and

Screenshot from 2024-03-27 10-07-32

Yes! The change in the identation result in a complete different render.

Expected behavior

What I want to do is that following, result in a proper nested custom container:

::: Info Fields To Update
::: details **Trade Name** - *String*
The name used commercially by the company, which appears in logos and advertising, the name known by the majority of its costumers.
:::
::: details **Registration Document** - *String*
The sequence of numbers or numbers and letters that identify a company. Every country has its own standard for its companies registration documents. For examples, in Brazil it's called CNPJ while in the United States it's called TIN.
:::
:::

or

::: Info Fields To Update
    ::: details **Trade Name** - *String*
    The name used commercially by the company, which appears in logos and advertising, the name known by the 
    majority of its costumers.
    :::
    ::: details **Registration Document** - *String*
    The sequence of numbers or numbers and letters that identify a company. Every country has its own standard for its 
    companies registration documents. For examples, in Brazil it's called CNPJ while in the United States it's called TIN.
    :::
:::

The reason I put those two identical codes, excepet for the identation, is that those two different codes produce two different results.

System Info

System:
    OS: Linux 5.15 Zorin OS 16.3
    CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
    Memory: 2.31 GB / 7.69 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.12.1 - /run/user/1000/fnm_multishells/115637_1711544379500/bin/node
    npm: 8.19.2 - /run/user/1000/fnm_multishells/115637_1711544379500/bin/npm
    pnpm: 8.9.0 - /run/user/1000/fnm_multishells/115637_1711544379500/bin/pnpm
  Browsers:
    Brave Browser: 123.1.64.109
    Chrome: 123.0.6312.86
  npmPackages:
    vitepress: ^1.0.1 => 1.0.1

Additional context

Thank you for taking your time helping me, reading my issue, approving this bug for fixing and solving my problem.

Validations

brc-dd commented 1 month ago

Nest them like you nest fences -- by increasing tick:

:::: info

::: details

foo bar

:::

::::

Yes! The change in the identation result in a complete different render.

That's because in second case it will be treated like indented code block.

ThalyssonLeite commented 1 month ago

@brc-dd Thank you so much!