@@ -286,12 +286,13 @@ img.error::after {
 
 .code-group .code-group__nav {
   margin-top: 0.85rem;
-  margin-bottom: calc(-1.7rem - 6px);
+  margin-bottom: calc(-1.6rem - 6px);
   padding-bottom: calc(1.7rem - 10px);
   padding-left: 10px;
   padding-top: 10px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
+  border-bottom: 1px solid var(--vp-code-block-border);
   background-color: var(--vp-code-block-bg);
 }
 
 
@@ -37,6 +37,7 @@
   --vp-custom-block-danger-text: rgb(196, 46, 46);
   --vp-custom-block-danger-text-deep: rgba(220, 38, 38, 1);
   --vp-code-block-bg: rgba(232, 232, 232, 0.3);
+  --vp-code-block-border: rgba(232, 232, 232, 1);
   --vp-term-block-bg: hsl(0, 1%, 92%);
   --vp-c-text-dark-1: rgb(240, 238, 238);
   --vp-c-text-dark-3: rgb(111, 111, 111);
@@ -80,6 +81,7 @@
   --vp-custom-block-danger-text: rgba(248, 113, 113, 1);
   --vp-custom-block-danger-text-deep: rgba(248, 113, 113, 1);
   --vp-code-block-bg: rgba(0, 0, 0, 0.3);
+  --vp-code-block-border: rgba(0, 0, 0);
   --vp-term-block-bg: hsl(0, 1%, 5%);
   --vp-c-gutter: rgba(84, 84, 84, .48);
   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
 
@@ -33,11 +33,12 @@ e.g `czg --config="./config/cz.js"`
 
 ```js
 // config/cz.js
-/** @type {import('czg').UserConfig['prompt']} */
-module.exports = {
+const { definePrompt } = require('czg')
+
+module.exports = definePrompt({
   maxSubjectLength: 100
   // configure ...
-}
+})
 ```
 
 :::tip
 
@@ -54,24 +54,58 @@ const v = site.value.themeConfig.nav?.[4]?.text.slice(1)
 }
 ```
 
-:::tip
-If you want to write JavaScript configuration, can add `@type` to file
+:::::tip
+If you want to write JavaScript configuration, can import helper functions from `czg` or add `@type` to file
 
+:::: code-group
+::: code-group-item cz.config.js
 ```js
-// .commitlintrc.cjs
-/** @type {import('czg').UserConfig} */
+const { definePrompt } = require('czg')
+
+module.exports = definePrompt({
+    scopes: ['hello', 'world'],
+})
+```
+:::
+::: code-group-item cz.config.js
+```js
+/** @type {import('czg').UserConfig['prompt']} */
 module.exports = {
-  rules: {
-    // @see: https://commitlint.js.org/#/reference-rules
-  },
-  prompt: {
     scopes: ['hello', 'world'],
-  },
 }
 ```
+:::
+::: code-group-item commitlint.config.js
+```js
+const { defineConfig } = require('czg')
+
+module.exports = defineConfig({
+    rules: {
+        // @see: https://commitlint.js.org/#/reference-rules
+    },
+    prompt: {
+        scopes: ['hello', 'world'],
+    },
+})
+```
+:::
+::: code-group-item commitlint.config.js
+```js
+/** @type {import('czg').UserConfig} */
+module.exports = {
+    rules: {
+        // @see: https://commitlint.js.org/#/reference-rules
+    },
+    prompt: {
+        scopes: ['hello', 'world'],
+    },
+}
+```
+:::
+::::
 
 More information about configure file and options. See → [Config](/config/)
-:::
+:::::
 
 
 ## Features and Help