GitHub-style Alerts

> [!TIP]
> Just a quick tip, that you can use `> [!TIP]` to create
> a GitHub-style alert in your README.md like this.

The original GitHub proposal is here. It’s rolled out basically everywhere on GitHub now.

Use it in your website #

And in case you like it, and wanted to use it in your own website, I wrote a quick markdown-it plugin for it:

markdown-it-github-alerts

Vite #

If you are using unplugin-vue-markdown:

// vite.config.ts
import Markdown from 'unplugin-vue-markdown/vite'
import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Markdown({
      markdownItSetup(md) {
        md.use(MarkdownItGitHubAlerts)
      }
    })
  ],
})

VitePress #

If you are using VitePress, you can add this to your .vitepress/config.js:

import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(MarkdownItGitHubAlerts)
    }
  }
})

Nuxt Content #

Nuxt Content use remark instead of markdown-it, so the plugin won’t work yet. I will implement it later if there is demand.

Reference #

• Commit of this blog post and setting it up
• Proposal to VitePress for adding this by default