【博客园样式美化】添加自定义Markdown语法
?> 普通提示条
!> 警告提示条
添加js代码,给对应标签添加特殊的class标识
- 添加在侧边栏/页尾
/**
* 扩展markdown语法
*/
function expandMarkodown() {
$('.blogpost-body p').html((i, c) => {
if (/^\?>/.test(c)) return '<p class="tip">' + c.slice(5).trim() + '</p>'
if (/^!>/.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;
}