这篇文章教大家怎么修改主题的引用样式为双引号形式。
比如我们在md里使用>引用语法写下:
1 2 3
| >博主为啥开淘宝店? >1.我说好奇你信吗。 >2.生活所迫*@(装大款)*
|
博主的JSimple主题默认显示的引用样式如下:
想把它改成这种样子的
因为这里双引号正好在引用块的前后,可以使用css的before\after伪元素实现。
首先使用F12开发工具找到引用块的元素
然后给这个元素添加css代码。
这里直接给出代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| blockquote:after { position: relative; content: '\f10e' !important; font-size: 1rem; float: right; top: -1rem; margin-right:-1em; color: #233; font-family: FontAwesome; } blockquote:before { position: relative; content: "\f10d" !important; font-size: 1rem; left: 0; margin-left:-1em; color: #233; font-family: FontAwesome; } .markdown-body blockquote { margin-left:1em;margin-right:1em;padding:.25em 1em;color:#666; }
|
其中.markdown-body blockquote
去掉了左边的边框。
然后content中的字符是根据字体文件的内容:
就这样,不想多说。太懂的可以参考B站视频教程
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦