提示
将代码组改成 Mac 风格，三个小圆点,由于Teek内置 Mac 风格三个小圆点，这里将对应的代码进行注释
docs\.vitepress\theme\styles\ 目录新建一个 vp-code.scss 文件md
.
├─ demo
│ ├─ docs-base
│ │ ├─ .vitepress
│ │ │ └─ config.mts
│ │ │ └─ theme
│ │ └─ style
│ │ └─ index.scss
│ │ └─ vp-code.scss
│ └─ index.md
└─ node_modules-复制下面代码，粘贴到 vp-code.scss 保存
scss
/* docs/.vitepress/theme/styles/vp-code.scss */
/* 代码块：增加留空边距 增加阴影 */
.vp-doc div[class*="language-"] {
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
padding-top: 20px;
}
/* 代码块：添加macOS风格的小圆点 */
// .vp-doc div[class*="language-"]::before {
// content: "";
// display: block;
// position: absolute;
// top: 12px;
// left: 12px;
// width: 12px;
// height: 12px;
// background-color: #ff5f56;
// border-radius: 50%;
// box-shadow:
// 20px 0 0 #ffbd2e,
// 40px 0 0 #27c93f;
// z-index: 1;
// }
/* 代码块：下移行号 隐藏右侧竖线 */
.vp-doc .line-numbers-wrapper {
padding-top: 40px;
border-right: none;
}
/* 代码块：重建行号右侧竖线 */
.vp-doc .line-numbers-wrapper::after {
content: "";
position: absolute;
top: 40px;
right: 0;
border-right: 1px solid var(--vp-code-block-divider-color);
height: calc(100% - 60px);
}
.vp-doc div[class*="language-"].line-numbers-mode {
margin-bottom: 20px;
}docs\.vitepress\theme\styles\code\文件中创建baimu-vp-code-hover.scss文件，并添加以下内容hover边框渐变动画效果默认背景呼吸灯效果
scss
// 颜色
$light-color-1: rgba(0, 123, 255, 0.8);
$light-color-2: rgba(136, 255, 255, 0.8);
$light-color-3: rgba(138, 0, 255, 0.8);
.vp-doc div[class*="language-"] {
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 10%);
position: relative;
z-index: 1;
overflow: hidden;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
border: 2px solid transparent;
z-index: -1;
pointer-events: none;
transition: border-color 0.3s ease;
}
&:hover:after {
border-color: $light-color-1;
animation: glow-around 3s linear infinite;
}
}
.vp-doc .line-numbers-wrapper {
padding-top: 40px;
border-right: none;
}
.vp-doc .line-numbers-wrapper::after {
content: "";
position: absolute;
top: 40px;
right: 0;
border-right: 1px solid var(--vp-code-block-divider-color);
height: calc(100% - 60px);
}
.vp-doc div[class*="language-"].line-numbers-mode {
margin-bottom: 20px;
}
// 流光动画
@keyframes glow-around {
0% {
border-color: $light-color-1;
}
33% {
border-color: $light-color-2;
}
66% {
border-color: $light-color-3;
}
100% {
border-color: $light-color-1;
}
}scss
// 代码块背景呼吸灯css特效
// 颜色
$light-color-1: rgba(0, 123, 255, 0.8);
$light-color-2: rgba(0, 255, 221, 0.8);
/* 样式 */
.vp-doc div[class*="language-"] {
box-shadow: var(--vp-shadow-5);
border-radius: 8px;
border: 2px solid transparent;
position: relative;
z-index: 1;
padding: 10px;
margin: 10px 0;
animation: glow-border 3s infinite linear;
&.dark {
animation: glow-border-dark 3s infinite linear;
}
}
/* group样式 */
.vp-code-group {
border-radius: 8px;
border: 2px solid transparent;
position: relative;
z-index: 1;
overflow-wrap: break-word;
word-break: break-word;
padding: 10px;
margin: 10px 0;
/* 样式 */
div[class*="language-"] {
box-shadow: none;
border: none;
position: static;
z-index: auto;
animation: none;
padding: 0;
margin: 0;
}
}
/* 动画 */
@keyframes glow-border {
0% {
box-shadow: 0 0 10px 2px $light-color-1;
}
50% {
box-shadow: 0 0 10px 2px $light-color-2;
}
100% {
box-shadow: 0 0 10px 2px $light-color-1;
}
}docs\.vitepress\theme\styles\文件中创建index.scss文件，并添加以下内容scss
@use "./vp-code.scss" as *; //代码块
@use "./code/baimu-vp-code-hover.scss" as *; // 代码块-hover边框渐变动画效果
// @use "./code/baimu-vp-code-huxi.scss" as *; // 代码块-默认背景呼吸灯效果docs\.vitepress\theme\index.ts文件中引入以下内容ts
// 引入Hyde全局自定义样式
import "./styles/index.scss";此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。