redesign the MDC syntax to beautify the markdown preview mode in common Markdown Editor for normal users

[Benbinbin]

The idea of MDC is so awesome, it supercharges markdown and makes markdown has more possibilties.

Problem

Let's say we design a static blog template or system for the regular users, it contain a lot of content components like the Content Wind template. Then users can just write the markdown files as blog posts, and they also can use the components by MDC syntax in markdown.

But for the normal users, they maybe don't know how to program and don't know how to set up the node environment to run the npm run dev command, most of them just learn the markdown and MDC syntax.

So their daily use cases will be:

• first creating some .md files inside the /content folder
• then begining to write blog posts, maybe they like to use Typora or other markdown editor to write and preview markdown file side by side at the same time (VS Code also has a built-in markdown preview mode, some users maybe writing .md in it).

But I think the MDC syntax, which uses ::block-component and :inline-component maybe make the markdown preview a little bit "dirty" in common Markdown Editor for the regular users

VS Code built-in markdown preview mode

Idea

inspiring by the VS Code Folding feature: VS Code can evaluated the source code folding regions base on the indentation of lines, also language syntax

Since the 1.22 release, folding regions can also be computed based on syntax tokens of the editor's configured language. The following languages already provide syntax aware folding: Markdown, HTML, CSS, LESS, SCSS, and JSON.

besides VS Code support to make a custom folding regions by adding some markers in the file, for Markdown the marker is <!-- #region --> for start region and <!-- #endregion --> for end region, I usually use them to wrap the math code, so I can toggle the long code easily

the Gif shows that VS Code use the markdown comment syntax to add the toggle feature, but the preview mode don't show any addition content

So I think the MDC syntax can redisign, using markdown comment syntax, like <!-- start::block-component --> and <!-- end::block-component --> for using block component in markdown, and <!-- :inline-component --> for inline component.

💡 another inspiring idea reference is remark-comment-config, it can config the remark parse rules by wrting some comments in markdown file.

[Tahul]

Hello @Benbinbin ;

I don't think we'll be changing the MDC syntax in that direction.

This syntax has been thought to have an editor in the first place, and that is part of the Nuxt roadmap.

Currently the suggested way to interact with MDC syntax should be a VSCode environment with the MDC extension enabled.

I think we could stop that discussion in favor of #1260 in which we'll track updates of the MDC syntax towards a better support in web editors and UIs.

Thank you a lot for raising that point and taking so much time to provide examples, this has a lot of value for us!