feat: add option about title bar for code snippets

yuyinws · Dec 20, 2024 · 7e5cd20 · 7e5cd20
1 parent 1091ea5
commit 7e5cd20
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -32,7 +32,11 @@ export default defineConfig({
   },
   markdown: {
     config(md) {
-      md.use(groupIconMdPlugin)
+      md.use(groupIconMdPlugin, {
+        titleBar: {
+          includeSnippet: true,
+        },
+      })
     },
     codeTransformers: [
       transformerTwoslash(),

diff --git a/docs/features.md b/docs/features.md
@@ -86,6 +86,23 @@ export default defineConfig({
 })
 ```
 
+### Includes Code Snippets
+
+If you also want to add title bar for [Code Snippets
+](https://vitepress.dev/guide/markdown#import-code-snippets):
+
+```ts {5} [.vitepress/config.ts]
+export default defineConfig({
+  markdown: {
+    config(md) {
+      md.use(groupIconMdPlugin, {
+        titleBar: { includeSnippet: true },
+      })
+    },
+  },
+})
+```
+
 ## Built-in Icons
 
 ### Package Managers

diff --git a/docs/test.md b/docs/test.md
@@ -0,0 +1,5 @@
+<<< ../src/builtin.ts
+
+``` [nuxt.config.ts]
+test
+```
diff --git a/src/markdown.ts b/src/markdown.ts
@@ -1,6 +1,19 @@
 import type Markdown from 'markdown-it'
 
-export function groupIconMdPlugin(md: Markdown) {
+interface MdPluginOptions {
+  titleBar: {
+    /**
+     * Whether the title bar is included in the [Snippets](https://vitepress.dev/guide/markdown#import-code-snippets)
+     *
+     * @defaultValue false
+     */
+    includeSnippet?: boolean
+  }
+}
+
+export function groupIconMdPlugin(md: Markdown, options?: MdPluginOptions) {
+  const _options = options || { titleBar: { includeSnippet: false } }
+
   // code group rule
   const labelRE = /<label\b(?![^>]+\bdata-title\b)[^>]*>(.*?)<\/label>/g
   const codeGroupOpenRule = md.renderer.rules['container_code-group_open']
@@ -34,8 +47,10 @@ export function groupIconMdPlugin(md: Markdown) {
       }
       const title = token.info.match(/\[(.*?)\]/)
 
+      const isIncludedSnippet = _options.titleBar.includeSnippet
+
       // only render code block not in code-group
-      if (!isOnCodeGroup && title) {
+      if (!isOnCodeGroup && title && (!(token as any).src || isIncludedSnippet)) {
         return `<div class="vp-code-block-title">
       <div class="vp-code-block-title-bar">
           <span class="vp-code-block-title-text" data-title="${md.utils.escapeHtml(title[1])}">${title[1]}</span>