VitePress 代码块优化

书接上回 VitePress 代码块显示行号

现在的代码块是不能设置标题的。可以使用 vitepress-plugin-group-icons 插件来为代码块添加标题，VitePress 的官方文档中也使用了这个插件

可参考 note.weizwz.com

安装插件

选择你使用的包管理器即可

npm

$ npm add vitepress-plugin-group-icons

pnpm

$ pnpm add vitepress-plugin-group-icons

yarn

$ yarn add vitepress-plugin-group-icons

配置插件

添加如下代码

.vitepress/config.mts

import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(groupIconMdPlugin)
    },
  },
  vite: {
    plugins: [
      groupIconVitePlugin()
    ],
  }
})

.vitepress/theme/index.ts

import 'virtual:group-icons.css'

修复小圆点与阴影

配置完成后，代码块的标题与图标均生效，但上一篇中配置的小圆点与阴影再次错乱了。仿照针对代码块的修复，可对带有标题的代码块进行类似的修复

添加如下样式

/* Code block titles fixes */

/* 代码块标题栏 - 增加留空边距 重置 VitePress 内置外边距 */
/* 为了让外边距统一在外层 .vp-code-group 中设置，便于添加阴影 */
.vp-doc div.vp-code-block-title-bar {
  padding-top: 20px;
  margin-left: 0;
  margin-right: 0;
}

/* 代码块标题栏 - 添加 macOS 风格的小圆点 */
.vp-doc div.vp-code-block-title-bar::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 12px;
  width: 12px;
  height: 12px;
  background-color: #ff5f56 !important;
  border-radius: 50%;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  z-index: 1;
}

/* 代码块标题栏内代码块 - 重置样式 */
.vp-doc div.vp-code-block-title div[class*="language-"] {
  box-shadow: none !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

/* 代码块标题栏内代码块 - 去除小圆点 */
.vp-doc div.vp-code-block-title div[class*="language-"]::before {
  content: "";
  background-color: inherit !important;
  box-shadow: none !important;
}

/* 代码块标题栏内代码块 - 下移行号 重置右侧竖线 */
.vp-doc div.vp-code-block-title .line-numbers-wrapper {
  padding-top: 20px !important;
  border-right: 1px solid var(--vp-code-block-divider-color) !important;
}

/* 代码块标题栏内代码块 - 删除重建竖线 */
.vp-doc div.vp-code-block-title .line-numbers-wrapper::after {
  content: "";
  border-right: none;
}

/* 代码块标题栏 - 添加阴影 重建移动设备外边距 */
.vp-doc div.vp-code-block-title {
  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 40%);
  margin: 16px -24px;
}

/* 代码块标题栏 - 重置圆角 设置外边距 */
@media (min-width: 640px) {
  .vp-doc div.vp-code-block-title {
    margin: 16px 0;
    border-radius: 8px;
  }
}