achieving collapse without vue component

[Mister-Hope]

https://theme-plume.vuejs.press/guide/markdown/collapse/

This is nice with a perfect trick to simply custom tokenizer with just hack-jacking unordered lists in markdown. But it would be confusing for users to:

1. ensure first line is a single-line paragraph.
2. this is the TITLE

If users are not providing the content that you are expecting, I think your plugin will throw (or at least the layout breaks badly). And your test cases do not contain checks for these nonstandard markdown contents.

Also a Vue component is introduced.

It did take hours for me to think of a nicer plan.

See： https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#attributes and https://caniuse.com/mdn-html_elements_details_name

The details natively support open/close state with a open attribute and a name attribute to achieve accordion. The current support range is 2 years major support (except Firefox with 1 year+)

I think it's possible to make the markdown plugin standard by outputting <details> (absolutely better a11y)
and a listener utils to handle envs that name are not supported.

Besides, I am planning to use a similar outlook with the original one. But, I will not do the trick to convert the unordered list to a details block in the render stage. Instead, new rules shall be registered and ensure a customized token is generated. Indentations are canceled to reduce illegal contents possibility. Only contents before FIRST marker are dropped.

I am planning with the following syntax:

<!-- fold is shorter -->
<!-- fold+ should be the same as "expand" -->
<!-- fold# should generate a name like "fold-1" -->
<!-- fold#abc should force use `name="abc"` -->
::: fold

<!-- default fold item, equal can be direct input from keyboard -->
== 标题

内容

<!-- force closed item -->
-- 标题

内容

<!-- force open item -->

++ 标题

内容

A scanner will quickly pick contents starting with `==` `--` `++` and trailing spaces as title, then render the resting content.

:::

Prettier is happy with it :)

Custom renderer shall be supported (to convert back to vue component)

Any suggestions about this implementation?

[pengzhanbo]

This is indeed an issue with the markdown list syntax itself. Without leaving an empty line for processing, consecutive content is treated as part of the same block rule. Although it requires an empty line and indentation of the content, it is actually acceptable from a readability perspective. I originally considered using -- after -, but it seems prettier format doesn't allow me to do that. One advantage of using unordered list syntax is that there is no learning curve.

Using ==, ++, -- is indeed better.

I didn’t render it as details+summary, just wanted to take a shortcut. [旺柴]