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

之前写过 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;
}
阅读剩余
THE END