代码块

提示

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

创建

• 在 docs\.vitepress\theme\styles\ 目录新建一个 vp-code.scss 文件

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

风格1

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

说明

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

/* 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;
}

风格2

• 在docs\.vitepress\theme\styles\code\文件中创建baimu-vp-code-hover.scss文件，并添加以下内容

hover边框渐变动画效果

// 颜色
$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;
    }
}

默认背景呼吸灯效果

// 代码块背景呼吸灯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文件，并添加以下内容

@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文件中引入以下内容

// 引入Eckes全局自定义样式
import "./styles/index.scss";