logo
Examples / GitHub Alerts
Source

GitHub Alerts

GitHub-style admonitions powered by the markedAlert extension. Supports NOTE, TIP, IMPORTANT, WARNING, and CAUTION types.

Component Renderers

The built-in AlertRenderer component renders alerts with CSS classes for easy theming. Pass it via the renderers prop.

Editor

571 characters

Preview

GitHub Alerts

GitHub-style alerts highlight critical information in documentation.

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

Mixed Content

Regular markdown works alongside alerts: bold, italic, and inline code.

Component Renderer Code

Usage

<script lang="ts">
  import SvelteMarkdown from '@humanspeak/svelte-markdown'
  import type { RendererComponent, Renderers }
    from '@humanspeak/svelte-markdown'
  import { markedAlert, AlertRenderer }
    from '@humanspeak/svelte-markdown/extensions'

  const source = '> [!NOTE]\n> Important info here.'

  interface AlertRenderers extends Renderers {
    alert: RendererComponent
  }

  const renderers: Partial<AlertRenderers> = {
    alert: AlertRenderer
  }
</script>

<SvelteMarkdown
  {source}
  extensions={[markedAlert()]}
  {renderers}
/>

AlertRenderer.svelte

<!-- AlertRenderer.svelte (built-in) -->
<script lang="ts">
  import type { AlertType } from './markedAlert.js'

  interface Props {
    text: string
    alertType: AlertType
  }

  const { text, alertType }: Props = $props()

  const titles: Record<AlertType, string> = {
    note: 'Note',
    tip: 'Tip',
    important: 'Important',
    warning: 'Warning',
    caution: 'Caution'
  }
</script>

<div class="markdown-alert markdown-alert-{alertType}"
     role="note">
  <p class="markdown-alert-title">
    {titles[alertType]}
  </p>
  <p>{text}</p>
</div>