VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

markdown-hint

@vuepress/plugin-markdown-hint

Add gfm alerts and hint containers to your VuePress site.

This plugin has been integrated into the default theme.

Usage

npm i -D @vuepress/plugin-markdown-hint@next
.vuepress/config.ts
import { markdownHintPlugin } from '@vuepress/plugin-markdown-hint'

export default {
  plugins: [
    markdownHintPlugin({
      // Enable hint container, true by default
      hint: true,
      // Enable gfm alert
      alert: true,
    }),
  ],
}

Guide

By default, we support important, info, note, tip, warning, danger, details containers with markdown container:

Tips

A custom tip container with code, link.

const a = 1
::: tip

A custom tip container with `code`, [link](#demo).

```js
const a = 1
```

:::

To customize the title of the container, you can add the title after the named container:

Custom Title

A important container with customized title.

::: important Custom Title

A important container with customized title.

:::

The container can contain a title only:

A warning text

::: warning A warning text
:::

The plugin also provides an alert option to support gfm alerts:

> [!note]
> This is note text

> [!important]
> This is important text

> [!tip]
> This is tip text

> [!warning]
> This is warning text

> [!caution]
> This is caution text

Options

hint

  • Type: boolean
  • Details: Whether enable hint containers, enabled by default.

alert

  • Type: boolean
  • Details: Whether enable gfm alert support.

injectStyles

  • Type: boolean
  • Default: true
  • Details: Whether to inject default styles.

locales

  • Type: MarkdownHintPluginLocaleConfig

    interface MarkdownHintPluginLocaleConfig {
      [localePath: string]: Partial<MarkdownHintPluginLocaleData>
    }
    
    interface MarkdownHintPluginLocaleData {
      /**
       * Default Title text for important block
       */
      important: string
    
      /**
       * Default Title text for note block
       */
      note: string
    
      /**
       * Default Title text for tip block
       */
      tip: string
    
      /**
       * Default Title text for warning block
       */
      warning: string
    
      /**
       * Default Title text for danger block
       */
      caution: string
    
      /**
       * Default Title text for info block
       */
      info: string
    
      /**
       * Default Title text for details block
       */
      details: string
    }
  • Details: The locales for hint container titles.

Edit this page on GitHub
Last Updated:: 4/12/25, 7:03 PM
Contributors: Mister-Hope
Prev
markdown-include
Next
markdown-math