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

import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
// vite.config.ts
import Markdown from 'unplugin-vue-markdown/vite'
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