bytemd-plugin-github-alerts

ByteMD plugin to support GitHub Alerts.

[!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.

> [!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.

Usage

pnpm add bytemd @bytemd/react bytemd-plugin-github-alerts

import { Editor } from '@bytemd/react'
import alerts from 'bytemd-plugin-github-alerts'
import 'bytemd/dist/index.css'
import 'bytemd-plugin-github-alerts/index.css'

const plugins = [
  alerts(), // must be placed before @bytemd/plugin-breaks
  // Add more plugins here
]

export default function App() {
  const [value, setValue] = useState('')

  return <Editor value={value} plugins={plugins} onChange={setValue} />
}

Credits

Inspired by antfu/markdown-it-github-alerts ❤️

License

MIT License © Frankie