美化-代码块

美化-代码块

目录

• 美化-代码块
• 目录
• 背景
• 环境
• 版权
• 背景
• 配置

[toc]

背景

teek默认的代码风格有点单调，那么就给它加一个效果吧。😉

环境

在 Teek@1.4.6-2025.8.31 上测试成功。

2025年9月16日测试。

版权

配置来自《白木》大佬的指导，感谢大佬💖💖💖。

背景

配置

（1）创建docs\.vitepress\theme\style\code目录，把白木大佬提供的2个css文件给放进去：

Administrator@DESKTOP-7PB0PFA MINGW64 /d/vitepress-theme-teek-one-private/docs/.vitepress/theme/style/code (master)
$ pwd
/d/vitepress-theme-teek-one-private/docs/.vitepress/theme/style/code

Administrator@DESKTOP-7PB0PFA MINGW64 /d/vitepress-theme-teek-one-private/docs/.vitepress/theme/style/code (master)
$ ls
baimu-vp-code-hover.scss  baimu-vp-code-huxi.scss

（2）注册，使其生效

编辑docs\.vitepress\theme\style\index.scss文件：

@use "./code/baimu-vp-code-hover.scss" as *; // 代码块-鼠标放上边框渐变动画效果
// @use "./code/baimu-vp-code-huxi.scss" as *; // 代码块-默认背景呼吸灯效果

（3）验证

结束。