在Blogger里用比较好的CSS样式显示代码

Blogger没有提供显示代码的样式。可以用一个取巧的办法，把引用样式Hack成用于显示代码的样式。

一、找到一段你喜欢的显示代码的CSS样式

找到一段你喜欢的显示代码的页面，F12，弹出DevTool，选取页面的代码段元素，在DevTool里找到相应的CSS样式

二、添加到Blogger

进入Blogger的后台，左侧选择“主题背景”，右侧再选择“自定义”。

在“主题背景设计器”里，依次选择“高级”、“添加CSS”，在右侧的文本框中对blockquote进行自定义CSS样式。最后“应用于博客”。

我使用的CSS样式如下：

blockquote {

    background-color: whitesmoke;

    border-radius: 0px;

    border: 1px solid rgb(204, 204, 204);

    box-sizing: border-box;

    color: #333333;

    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;

    font-size: 14px;

    line-height: 1.42857;

    margin-bottom: 10.5px;

    overflow: auto;

    padding: 10px;

    word-break: break-all;

    word-wrap: break-word;

    text-align: left;

    font-style: normal;

}

放在 https://github.com/crazypeace/blockquote_css

PS: 如果遇到样式生效不完全的情况，需要添加 !important 后缀。参考 https://zelikk.blogspot.com/2020/10/blogger-css-important.html

PSS: 优先使用 Source Code Pro 字体
https://zelikk.blogspot.com/2022/04/test-font-for-code.html