feat(theme-default): add code-group custom container

Author: meteorlxy

packages/@vuepress/theme-default/src/index.ts

@@ -5,6 +5,8 @@ import {
   resolveActiveHeaderLinksPluginOptions,
   resolveContainerPluginOptions,
   resolveContainerPluginOptionsForDetails,
+  resolveContainerPluginOptionsForCodeGroup,
+  resolveContainerPluginOptionsForCodeGroupItem,
   resolveDebugPluginOptions,
   resolveGitPluginOptions,
   resolveMediumZoomPluginOptions,
@@ -43,6 +45,14 @@ export const defaultTheme: Theme<DefaultThemeOptions> = (options, app) => {
       ],
       ['@vuepress/container', resolveContainerPluginOptions(options, 'danger')],
       ['@vuepress/container', resolveContainerPluginOptionsForDetails(options)],
+      [
+        '@vuepress/container',
+        resolveContainerPluginOptionsForCodeGroup(options),
+      ],
+      [
+        '@vuepress/container',
+        resolveContainerPluginOptionsForCodeGroupItem(options),
+      ],
       ['@vuepress/debug', resolveDebugPluginOptions(options, app)],
       ['@vuepress/git', resolveGitPluginOptions(options)],
       ['@vuepress/medium-zoom', resolveMediumZoomPluginOptions(options)],

packages/@vuepress/theme-default/src/node/resolveContainerPluginOptions.ts

@@ -54,3 +54,41 @@ export const resolveContainerPluginOptionsForDetails = (
     after: () => '</details>\n',
   }
 }
+
+/**
+ * Resolve options for @vuepress/plugin-container
+ *
+ * For code-group block
+ */
+export const resolveContainerPluginOptionsForCodeGroup = (
+  options: DefaultThemeOptions
+): ContainerPluginOptions | boolean => {
+  if (options.themePlugins?.container?.codeGroup === false) {
+    return false
+  }
+
+  return {
+    type: 'code-group',
+    before: () => `<CodeGroup>\n`,
+    after: () => '</CodeGroup>\n',
+  }
+}
+
+/**
+ * Resolve options for @vuepress/plugin-container
+ *
+ * For code-group-item block
+ */
+export const resolveContainerPluginOptionsForCodeGroupItem = (
+  options: DefaultThemeOptions
+): ContainerPluginOptions | boolean => {
+  if (options.themePlugins?.container?.codeGroupItem === false) {
+    return false
+  }
+
+  return {
+    type: 'code-group-item',
+    before: (info) => `<CodeGroupItem title="${info}">\n`,
+    after: () => '</CodeGroupItem>\n',
+  }
+}

packages/@vuepress/theme-default/src/types/options.ts

@@ -26,6 +26,8 @@ export interface DefaultThemeOptions
       warning?: boolean
       danger?: boolean
       details?: boolean
+      codeGroup?: boolean
+      codeGroupItem?: boolean
     }
 
     /**