[Feature Request] support callout

[zhuzhzh]

callout is one concept from Obsidian. See https://help.obsidian.md/Editing+and+formatting/Callouts

github already supports it. see https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

It looks mkdocs can support it with the plugin. See https://pypi.org/project/mkdocs-callouts/

[!TIP] try it

Please help check if MPE can support callout. Thanks!

[bjesuiter]

I support this request, would be very nice to have!

[marcorossiIT]

[!note] related to #636

[brandonpeebles]

Any update on this? Would love this feature!

[sun-cube]

Would love to have this.

[ajkdrag]

I need this, so that docs can be compatible with Github and Obsidian and Foam.

[EmmetZ]

Since MPE can extend its markdown parser, I ask google gemini to write a parser for me to convert callout to Admonition which is supported by MPE. And it works quite good! 😀

You can replace the global markdown parser function onWillParseMarkdown with the following code in the parser.js file. (click ctrl+shift+p in vscode and search Markdown Preview Enhanced: Extend Parser (Global))

onWillParseMarkdown: async function (markdown) {
  return new Promise((resolve, reject) => {
    const calloutRegex = /^> ?\[!(?<type>\w+)\](?<title>.*)?\r?\n(?<content>(?:>.*\r?\n?)*)/gm;
    const newMarkdown = markdown.replace(
      calloutRegex,
      (match, type, title, content) => {
        const admonitionType = type.toLowerCase();
        const admonitionTitle = title && title.trim() ? `${title.trim()}` : "";

        const admonitionContent = content
          .replace(/^> ?/gm, "")
          .split(/\r?\n/)
          .map((line) => `    ${line}`)
          .join("\n");
        return `!!! ${admonitionType} ${admonitionTitle}\n${admonitionContent}\n\n`;
      }
    );
    return resolve(newMarkdown);
  });
}

preview:

[zhuzhzh]

Since MPE can extend its markdown parser, I ask google gemini to write a parser for me to convert callout to Admonition which is supported by MPE. And it works quite good! 😀

You can replace the global markdown parser function onWillParseMarkdown with the following code in the parser.js file. (click ctrl+shift+p in vscode and search Markdown Preview Enhanced: Extend Parser (Global))

onWillParseMarkdown: async function (markdown) { return new Promise((resolve, reject) => { const calloutRegex = /^> ?[!(?\w+)](?

    const admonitionContent = content
      .replace(/^> ?/gm, "")
      .split(/\r?\n/)
      .map((line) => `    ${line}`)
      .join("\n");
    return `!!! ${admonitionType} ${admonitionTitle}\n${admonitionContent}\n\n`;
  }
);
return resolve(newMarkdown);

}); }

preview:

Great! If you test it fully, I think you should release one PR so that every one can enjoy it