代码组

提示

将代码组改成 Mac 风格，三个小圆点,由于Teek内助 Mac 风格三个小圆点，这里将对应的代码进行注释

创建

• 在 Demo\docs-base\.vitepress\theme\style 目录新建一个 vp-code-group.scss 文件

.
├─ demo
│ ├─ docs-base
│ │ ├─ .vitepress
│ │ │ └─ config.mts
│ │ │ └─ theme
│ │     └─ style
│ │       └─ index.scss
│ │       └─ vp-code-group.scss
│ └─ index.md
└─ node_modules

配置

• 复制下面代码，粘贴到 vp-code-group.scss 保存

说明

本次代码感谢 @Aurorxa 提供，本人在此基础上进行一些修改

/* Demo/docs-base/.vitepress/theme/style/vp-code-group.scss */

/* 代码组：tab间距 */
.vp-code-group .tabs {
  padding-top: 20px;
}

/* 代码组：添加样式及阴影 */
.vp-code-group {
  color: var(--vp-c-black-soft);
  border-radius: 8px;
  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}

/* 代码组：添加macOS风格的小圆点 */
.vp-code-group .tabs::before {
  content: " ";
  position: absolute;
  top: 12px;
  left: 12px;
  height: 12px;
  width: 12px;
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
}

/* 代码组：修正倒角、阴影、边距 */
.vp-code-group div[class*="language-"].vp-adaptive-theme.line-numbers-mode {
  border-radius: 8px;
  box-shadow: none;
  padding-top: 0px;
}

/* 代码组：隐藏小圆点 */
.vp-code-group
  div[class*="language-"].vp-adaptive-theme.line-numbers-mode::before {
  display: none;
}

/* 代码组：修正行号位置 */
.vp-code-group .line-numbers-mode .line-numbers-wrapper {
  padding-top: 20px;
}

/* 代码组：修正行号右侧竖线位置 */
.vp-code-group .line-numbers-mode .line-numbers-wrapper::after {
  top: 24px;
  height: calc(100% - 45px);
}

/* 代码组（无行号）：修正倒角、阴影、边距 */
.vp-code-group div[class*="language-"].vp-adaptive-theme {
  border-radius: 8px;
  box-shadow: none;
  padding-top: 0px;
}

/* 代码组（无行号）：隐藏小圆点 */
.vp-code-group div[class*="language-"].vp-adaptive-theme::before {
  display: none;
}

• 在Demo\docs-base\.vitepress\theme\style\文件中创建index.scss文件，并添加以下内容

@use "./vp-code-group.scss" as *; //代码组

引入

• 在Demo\docs-base\.vitepress\theme\index.ts文件中引入以下内容

// 引入Demo\docs-base\.vitepress\theme\style\index.scss全局样式
import "./style/index.scss";

效果

输入：

::: code-group

```sh [pnpm]
#查询pnpm版本
pnpm -v
```

```sh [yarn]
#查询yarn版本
yarn -v
```

:::

输出：

sh

#查询pnpm版本
pnpm -v

sh

#查询yarn版本
yarn -v