Jarvis @ JM.me

GitHub-style Alerts

Nov 30, 2023 · 2min

Tip

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

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

jarvis-ai/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.

Important

Thanks for reading! :)

> Comment on twitter (X)
 
CC BY-NC-SA 4.0  2009-PRESENT © Nuxsco (AMS) This website rewrite several times from those years up to present