feat: add plugin-markdown-hint

docs/.vuepress/configs/sidebar/en.ts

@@ -100,6 +100,7 @@ export const sidebarEn: SidebarOptions = {
     'append-date',
     'markdown-container',
     'markdown-image',
+    'markdown-hint',
     'markdown-math',
     'links-check',
     'prismjs',

docs/.vuepress/configs/sidebar/zh.ts

@@ -100,6 +100,7 @@ export const sidebarZh: SidebarOptions = {
     'append-date',
     'markdown-container',
     'markdown-image',
+    'markdown-hint',
     'markdown-math',
     'links-check',
     'prismjs',

docs/.vuepress/theme.ts

@@ -63,6 +63,9 @@ export default defaultTheme({
   themePlugins: {
     // only enable git plugin in production mode
     git: IS_PROD,
+    hint: {
+      alert: true,
+    },
     // use shiki plugin in production mode instead
     prismjs: IS_PROD
       ? false

docs/plugins/markdown/markdown-hint.md

@@ -0,0 +1,158 @@
+# markdown-hint
+
+<NpmBadge package="@vuepress/plugin-markdown-hint" />
+
+Add gfm alerts and hint containers to your VuePress site.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-markdown-hint@next
+```
+
+```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:
+
+::: tip
+
+A custom tip container with `code`, [link](#demo).
+
+```js
+const a = 1
+```
+
+:::
+
+````md
+::: 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:
+
+::: important Custom Title
+
+A important container with customized title.
+
+:::
+
+```md
+::: important Custom Title
+
+A important container with customized title.
+
+:::
+```
+
+The container can contain a title only:
+
+::: warning A warning text
+:::
+
+```md
+::: warning A warning text
+:::
+```
+
+The plugin also provides an `alert` option to support gfm alerts:
+
+```md
+> [!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.
+
+### locales
+
+- Type: `MarkdownHintPluginLocaleOptions`
+
+  ```ts
+  interface MarkdownHintPluginLocaleOptions {
+    [localePath: string]: 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.

docs/themes/default/markdown.md

@@ -2,27 +2,7 @@
 
 <NpmBadge package="@vuepress/theme-default" />
 
-## Custom Containers
-
-- Usage:
-
-  ```md
-  ::: <type> [title]
-  [content]
-  :::
-  ```
-
-  The `type` is required, and the `title` and `content` are optional.
-
-  Supported `type` :
-
-  - `tip`
-  - `warning`
-  - `danger`
-  - `details`
-  - Alias of [CodeGroup](./components.md#codegroup) and [CodeGroupItem](./components.md#codegroupitem):
-    - `code-group`
-    - `code-group-item`
+## Hint Containers
 
 - Example 1 (default title):
 
@@ -96,7 +76,25 @@ console.log('Hello, VuePress!')
 
 :::
 
-- Example 3 (code group alias):
+## Custom Containers
+
+- Usage:
+
+  ```md
+  ::: <type> [title]
+  [content]
+  :::
+  ```
+
+  The `type` is required, and the `title` and `content` are optional.
+
+  Supported `type` :
+
+  - Alias of [CodeGroup](./components.md#codegroup) and [CodeGroupItem](./components.md#codegroupitem):
+    - `code-group`
+    - `code-group-item`
+
+- Example:
 
 **Input**
 

docs/themes/default/plugin.md

@@ -48,10 +48,6 @@ export default {
 
   `ContainerType` type is:
 
-  - `tip`
-  - `warning`
-  - `danger`
-  - `details`
   - `codeGroup`
   - `codeGroupItem`
 
@@ -80,6 +76,19 @@ export default {
 
   Enable [@vuepress/plugin-git](../../plugins/development/git.md) or not.
 
+## themePlugins.hint
+
+- Type: `MarkdownHintPluginOptions | boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-markdown-hint](../../plugins/markdown/markdown-hint.md) or not.
+
+- Also see:
+  - [Default Theme > Markdown > Hint Containers](./markdown.md#hint-containers)
+
 ## themePlugins.linksCheck
 
 - Type: `LinksCheckPluginOptions | boolean`