博客园 Markdown CSS样式调整

根据博客园的Markdown文章 样式优化 实战经历,大部分的事情已经搞定了,而且原作者[huizong](github: huizhong/github-markdown-css)已经把所有.markdown-body替换成了.cnblogs-markdown,不需要自己再手动操作了。

huizong的CSS

我的主题是SimpleMemory,应用后发现个问题:发表后的blockquote样式会和原来的模板重叠,同时有竖线和引号显示。

经过检查发布后的元素,发现了一个新的外部容器,.postBody。如果这个不做修改,那么显示结果仍旧可能会比较糟糕。

这就需要在页面定制 CSS 代码中,对于显示不正常的元素,增加一条.postBody 样式,比如.postBody blockquote{background:none;}。增加之后显示正常。

其他CSS

对于其他没有定义外部容器的CSS,如果直接应用会影响整个页面的显示。所以要在css里批量加.cnblogs-markdown。暂时还没发现什么好的方法。幸好不多,手动改改吧。。

推荐少数派CSS,很好看。

代码区域优化

又发现了不一样的容器:.cnblogs-markdown .hljs, .cnblogs-post-body .hljs 懒得管是什么了,直接对pre,code等几个字段重新改一次,搞定。

但是行号依然没有。

发现比用户CSS优先级更高的CSS

发现新bug,H1,H2等等的格式都不太对,于是再次检查,发现了这个外部容器:#likecs_post_body 这个东西的样式比用户CSS级别还高,所以所有跟这个样式有冲突的CSS全都被覆盖了。

直接拿来加在CSS里:

#likecs_post_body h1 {
        font-size: 2.2em;
        font-weight: 700;
        line-height: 1.1;
        padding-top: 16px;
        margin-bottom: 4px;
        border-bottom: 2px solid #eee;
}

这次显示差不多正常了

增加行号显示

注意:需要先在后台申请JS权限,申请入口在自定义CSS下边一点点

参考改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

文章代码并不好用!无法正确显示行号,以及代码格式混乱,暂时先不用了

关于下方广告

可以用js绕过博客园的判断,但是鉴于这是博客园的主要收入,所以不建议去除广告。