使用Vuepress编写markdown文档时,默认的代码块样式比较干。很多博客文章的代码块采用mac风格边框,视觉性比较好,该边框可以通过修改全局CSS实现。
可以在 .vuepress/styles/index.scss
中插入以下全局样式:
.theme-hope-content pre {
position: relative;
padding-top: 2.2em !important;
border-radius: 12px !important;
background-color: #2e2e38 !important; /* 由#1e1e1e变为#2e2e38 */
box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
overflow: hidden;
}
.theme-hope-content pre::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 2em;
width: 100%;
background: #3a3a45; /* 由#2c2c2c变为#3a3a45,稍亮 */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
z-index: 10;
}
.theme-hope-content pre::after {
content: "";
position: absolute;
top: 0.6em;
left: 1em;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: 24px 0 0 #ffc107, 48px 0 0 #4caf50;
background-color: #f44336;
z-index: 15;
display: block;
}
原创2025/6/30大约 1 分钟