How to configure vscode-remark to format admonitions properly?

[rakuzen25]

I'm using MkDocs, which supports admonitions using the Python-Markdown admonition extension. The syntax is basically:

!!! note
    Content

To get:

However, when I use vscode-remark to format Markdown files in VS Code, it automatically removes the four spaces in front of the content:

!!! note
Content

This does not render properly (despite an answer from 2018 saying it would).

Is there any way to configure the extension such that it preserves the white spaces during formatting?

[ChristianMurphy]

Admonitions are not part of commonmark, and therefore are not directly supported by remark.
However, a plugin can be used to add support, for example https://github.com/elviswolcott/remark-admonitions or https://github.com/myl7/remark-github-beta-blockquote-admonitions

It's also worth noting that, if Mkdoc has a bug in their admonitions support, as you suggest. It would probably be good to raise a bug with Mkdoc rather than trying to push other project to add a bug to their markdown to match.

[rakuzen25]

Thanks for your suggestions! I've actually already taken a look at those two plugins, but it seems like both have different syntaxes, and I'm not sure whether it would work specifically with this one. (On a side note - do I simply add a plugin to my .remarkrc in order for it to work with the VS Code plugin? Apologies, I am quite new to this project and still trying to get my head around.)

In terms of the syntax itself, I don't really think it's a bug. There's not anywhere other than that answer that uses an admonition block without the indentation, so I presume it's an intended behaviour to have the actual content indented.

[ChristianMurphy]

do I simply add a plugin to my .remarkrc in order for it to work with the VS Code plugin?

Yes, there's an overview of how configuration files work here: https://github.com/unifiedjs/unified-engine/blob/main/doc/configure.md#configuration

I've actually already taken a look at those two plugins, but it seems like both have different syntaxes

In that case, if really needed you could create a new parser plugin, https://github.com/orgs/remarkjs/discussions/1019 give an overview of that.

---

Another alternative, would be using a site generator which supports more standardized markdown and markdown extensions.
Some which build on remark, and therefore have plugins which match what can be supported in remark's formatting include:

• https://docusaurus.io/
• https://vuepress.vuejs.org/
• https://www.docz.site/

just to name a few

[wooorm]

it automatically removes the four spaces in front of the content

To this project, it is just a paragraph with superfluous whitespace:

alpha
    bravo

This project removes superfluous whitespace:

alpha
bravo

mkdocs/mkdocs#1659 (comment)

That answer has nothing to do with this project. This type of “admonition” is, as Christian mentioned, a custom markdown extension that not a lot of places support.
I recommend not using such custom extensions, when possible.
Do you have alternatives?

A similar construct, that is more likely to enter markdown in more places, is directives: https://github.com/remarkjs/remark-directive

On a side note - do I simply add a plugin to my .remarkrc in order for it to work with the VS Code plugin

npm install whatever-you-want and then indeed add it in .remarkrc.

[rakuzen25]

Got it, I'll take a look!