Markdown in utils.status.show() in build plugin deploy summary

I have noticed that some markdown is supported and other is not. It would be nice to have the tag support expanded and officially documented.

Asks:

  • Add support for `code` inside utils.status.show({text:"`code`"}) and improve styling inside utils.status.show({summary:"`code`"})
  • Make **bold** be more noticeable
  • Add font-style: italic; for *italic*

My testing:

summary supports:

  • Inline Code - sorta ok, to improve add padding: 0 0.3em; background-color: #ffffff1a;
  • Bold - not very noticeable, needs CSS font-weight: 700;
  • Italic - needs CSS font-style: italic;
  • Links - looks awesome
  • Lists - unsupported
  • Headings - unsupported
  • Horizontal rule - unsupported
  • HTML tags - unsupported

text supports:

  • Inline Code - unsupported
  • Bold - not very noticeable, needs CSS font-weight: 700;
  • Italic - needs CSS font-style: italic;
  • Links - looks awesome
  • Lists - supports bulleted lists (I didn’t test numbered lists)
  • Headings - supports h1 - h6
  • Horizontal rule - supported
  • HTML tags - unsupported

Netlify plugin code used for testing:

module.exports = ({ }) => {
  let markdown = "Markdown **bold** *italic* `code` ([title](https://www.example.com)):\n";
  markdown += "- Markdown **bold** *italic* `code` ([title](https://www.example.com))\n";
  markdown += "- Markdown `code` ``code`` ```code```\n";
  markdown += "# h1\n## h2\n### h3\n#### h4\n##### h5\n###### h6\n";
  markdown += "* * *\n***\n*****\n- - -\n---------------------------------------\n";
  markdown += "html <code>code</code><strong>strong</strong><b>b</b><em>em</em><i>i</i>";

  return {
    onPreBuild: ({ utils }) => {
      utils.status.show({
        summary: markdown,
        text: markdown,
      });
    },
  };
};

Would also be nice to make sure lists could next at least one level (I didn’t test this).

Related post

Extensions now have the ability to render React: Add a surface to extension UI | 2.20.0

Are there any example extensions which use these for people to look at?

This was released last week, so I won’t expect.

Thanks for the suggestion, Tyson, we gave you a bit of credit on social. :wink:

We should have an example for you soon.