packages/alert/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marked Alert</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.3.0/github-markdown-dark.css"
    />

    <style>
      .markdown-body {
        background: #22272e;
        color: #adbac7;
      }

      #content {
        margin: 0 auto;
        padding: 1rem;
        max-width: 928px;
      }

      .markdown-alert {
        padding: 0 1em;
        margin-bottom: 16px;
        color: inherit;
        border-left: 0.25em solid #444c56;
      }

      .markdown-alert-title {
        display: inline-flex;
        align-items: center;
        font-weight: 500;
      }

      .markdown-alert-note {
        border-left-color: #539bf5;
      }

      .markdown-alert-tip {
        border-left-color: #57ab5a;
      }

      .markdown-alert-important {
        border-left-color: #986ee2;
      }

      .markdown-alert-warning {
        border-left-color: #c69026;
      }

      .markdown-alert-caution {
        border-left-color: #e5534b;
      }

      .markdown-alert-note > .markdown-alert-title {
        color: #539bf5;
      }

      .markdown-alert-tip > .markdown-alert-title {
        color: #57ab5a;
      }

      .markdown-alert-important > .markdown-alert-title {
        color: #986ee2;
      }

      .markdown-alert-warning > .markdown-alert-title {
        color: #c69026;
      }

      .markdown-alert-caution > .markdown-alert-title {
        color: #e5534b;
      }

      .mr-2 {
        margin-right: 0.5rem;
      }
    </style>
  </head>

  <body class="markdown-body">
    <div id="content"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-alert/dist/index.umd.min.js"></script>
    <script>
      const md = `# Example

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

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

---

## Nestable

Nested within other elements.

> [!NOTE]
> This is a note
>
> > blockquote
> > after

> [!IMPORTANT]
>
> > multi line
> >
> > blockquote before
>
> This is an important alert

> This is a blockquote with
>
> > [!TIP]
> > tips inside

> [!WARNING]
>
> ~~~js
> console.log('nested alert')
> ~~~
>
> > [!CAUTION]
> > [Reference-style link][1]
> >
> > - This is
> > - a \`caution\` alert

[1]: https://google.com
`

      document.getElementById("content").innerHTML = new marked.Marked()
        .use(markedAlert())
        .parse(md)
    </script>
  </body>
</html>