Configure prettier to recognise Admonition markdown

Question

We are using Prettier for VSCode to keep our markdown tidy. In our markdown for MKDocs we use the admonition extension. It produced nice boxes using a simple syntax:

!!! note "Some title"
    This is the note text
    inside the box

Unfortunately prettier doesn't like the 4 leading spaces and removes them. Removing leading spaces is OK for other parts of the document. Our current solution is a little cumbersome:

<!-- prettier-ignore -->
!!! note "Some title"
    This is the note text
    inside the box

Is there a way to configure Prettier to recognise the admonition syntax and leave the spaces in place, so we don't need to decorate each admonition using <!-- prettier-ignore -->?

Answer 1

I am using prettier pre-commit hook but hopefully it also works for VSCode extension.

You should add a blank line between the title and the body of the notes

!!! note "Some title"

    This is the note text
    inside the box

It gives the following output:

---

Here is my configuration of prettier:

  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v2.2.1
    hooks:
      - id: prettier
        args:
          - --print-width=100
          - --prose-wrap=always
          - --tab-width=2

Here is my configuration for mkdocs:

• packages

mdx-truly-sane-lists==1.3
mkdocs==1.3.0
mkdocs-git-revision-date-plugin==0.3.2
mkdocs-material==8.2.11
mkdocs-material-extensions==1.0.3
pymdown-extensions==9.1

• extensions in mkdoc.yml

markdown_extensions:
  # support emojis
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  # both following extensions add lines into code blocks
  - pymdownx.highlight:
      linenums: true
  - pymdownx.superfences
  # support pad width = 2, as formatted with prettier
  - mdx_truly_sane_lists
  # Allow to use collapsible call-outs
  # https://squidfunk.github.io/mkdocs-material/reference/admonitions/
  - admonition
  - pymdownx.details