在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;
}

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

评论

The Hot3 in Last 30 Days

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程