在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
评论
发表评论