【博客园样式美化】添加自定义Markdown语法-526互联

?> 普通提示条

!> 警告提示条

添加js代码，给对应标签添加特殊的class标识

添加在侧边栏/页尾

     /**
     * 扩展markdown语法
     */
    function expandMarkodown() {
         $('.blogpost-body p').html((i, c) => {
            if (/^\?&gt;/.test(c)) return '<p class="tip">' + c.slice(5).trim() + '</p>'
            if (/^!&gt;/.test(c)) return '<p class="warn">' + c.slice(5).trim() + '</p>'
        })
    }
    expandMarkodown();

添加css代码，设置样式

在自定义css的地方，添加如下代码

.blogpost-body p.tip {
    background-color: rgb(66 185 131 / 10%)!important;
    color: #ddd !important;
}

.blogpost-body p.warn {
    background-color: rgb(255 102 102 / 10%)!important;
    color: #ddd !important;
}

.blogpost-body p.tip {
    border-left: 4px solid #42b983 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 15px !important;
    background-color: rgb(66 185 131 / 10%) !important;
    --text-opacity: 1 !important;
    color: #484c7a !important;
    box-shadow: 0 4px 11px 0 rgb(37 44 97 / 9%), 0 1px 3px 0 rgb(93 100 148 / 6%) !important;
    margin: 10px 8px !important;
    font-size: 14px;
    font-weight: 400;
}

.blogpost-body p.warn {
    position: relative;
    border-left: 4px solid #f66 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 15px !important;
    background-color: rgb(255 102 102 / 10%) !important;
    --text-opacity: 1 !important;
    color: #484c7a !important;
    box-shadow: 0 4px 11px 0 rgb(37 44 97 / 9%), 0 1px 3px 0 rgb(93 100 148 / 6%) !important;
    margin: 10px 8px !important;
    font-size: 14px;
    font-weight: 400;
}

.blogpost-body p.warn:before {
    background-color: #f66;
    border-radius: 100%;
    color: #fff;
    content: '!';
    font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    left: -12px;
    line-height: 20px;
    position: absolute;
    height: 20px;
    width: 20px;
    text-align: center;
    top: 14px;
}