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, caution, details containers with markdown container:

Tips

A custom tip container with code and links.

const a = 1

Demo

::: tip

A custom tip container with `code` and [links](https://example.com).

```js
const a = 1
```

:::

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

Custom Title

An important container with customized title.

Demo

::: important Custom Title

An important container with customized title.

:::

The container can contain a title only:

Title only

Demo

::: warning Title only
:::

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

hintboolean

Defaulttrue

Whether to enable hint containers including important, info, note, tip, warning, caution, details.

alertboolean

Whether to enable GFM alert support.

injectStylesboolean

Defaulttrue

Whether to inject default styles.

localesMarkdownHintPluginLocaleConfig

Locale config for hint container titles.