Support github markdown alert format

[zookini]

Github markdown alerts and Observable markdown notes are pretty much the same thing but with a different syntax. Can Observable add support for the github syntax?

[mbostock]

You can do this using the markdownIt config option to register a Markdown plugin. Here are the steps:

1. Install markdown-it-github-alerts, say with npm install.

2. Import the plugin in your observablehq.config.js, and assign it to the markdownIt option. Also declare a custom stylesheet style.css that you will use to add the corresponding CSS classes.

import MarkdownItGitHubAlerts from "markdown-it-github-alerts";

export default {
  style: "style.css",
  markdownIt: (md) => md.use(MarkdownItGitHubAlerts)
};

3. In the custom stylesheet style.css, import the corresponding stylesheets from markdown-it-github-alerts, as well as any other styles you want, including Framework’s default styles and the desired theme.

@import url("observablehq:default.css");
@import url("observablehq:theme-air.css") (prefers-color-scheme: light);
@import url("observablehq:theme-near-midnight.css") (prefers-color-scheme: dark);
@import url("markdown-it-github-alerts/styles/github-colors-light.css");
@import url("markdown-it-github-alerts/styles/github-colors-dark-media.css");
@import url("markdown-it-github-alerts/styles/github-base.css");

You can test with page like so:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

Which should look like this:

[zookini]

Thanks Mike that looks good