WordPress 主题美化 – 给代码块添加 mac 风格样式

共计 451 个字符，预计需要花费 2 分钟才能阅读完成。

之前写过 WordPresss 主题美化-给代码块添加 mac 风格的背景图片，这方式虽然能实现，但是由于使用了背景图片，操作还是稍微有点麻烦。

今天这个代码直接插入代码即可实现美化代码块，清朝云现在用的就是这个，css 代码如下：

.post-content-post pre::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1000;
    position: absolute;
}

.post-content-post pre {
    max-height: unset;
    padding: 0 0.5em 0 0.5em;
    background: #2d3748;
}

.post-content-post pre code {
    margin-top: 16px;
}

提醒：本文发布于602天前，文中所关联的信息可能已发生改变，请知悉！