改变网页代码块的字体样式

改变网页代码块的字体样式,LeetCode、CSDN、掘金、博客园的代码块字体全被设置为Cascadia Code这款字体,后面还有YaHei Consolas Hybrid和Lucida Console这两款字体做候选,最后由CSDN代码块的字体样式兜底

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

作者
get-want
今日安裝
0
安裝總數
244
評價
2 0 0
版本
0.3
建立日期
2021-09-21
更新日期
2021-09-24
尺寸
4.3 KB
授權條款
未知
腳本執行於
所有網站

美化网页的代码字体

相关博客

更新:2021年9月22日24:37:33

参考:【油猴脚本】改变网页代码块的字体样式(CSS;设置@font-face和font-family)_赖念安的博客-CSDN博客

更新日志

V0.1

更新时间:2021年9月20日23:04:41

更新功能:

1、改变LeetCode、CSDN、博客园、greasyfork嵌入的代码的显示样式(由原来的宋体改为个人更喜欢的Cascadia Code或YaHei Consolas Hybrid或Lucida Console字体(当然,前提是用户本地安装了相应的字体)。后面还可以加上诸如Monacc,monospace的候选补充。要是你要自己喜欢的其他字体,那就在 font-family 后面加上字体名称就可以了,注意字体名称是打开字体文件后所显示的字体名称。比如:

V0.2

更新时间:2021年9月23日00:41:45

更新功能:

1、修复了在LeetCode编辑区选中文字时会出现因空格字符宽度变化而导致的闪跳和位移。

V0.3

更新时间:2021年9月24日16:17:07

更新功能:

1、解决了(准确来说是避免了)LeetCode编辑区字体设置为YaHei Consolas Hybrid时出现的光标偏移问题。

2、将LeetCode问题描述区的字体也改为了 Cascadia Code 和 YaHei Consolas Hybrid。


前言

不知道其他人有没有感觉LeetCode题解区的代码部分的字体有点不够美观,也可能是我的电脑上的本地字体库的原因吧……反正我是想改一改它的字体样式了……于是就有了写这个脚本的想法。

// CSDN的部分代码块的字体格式:
Source Code Pro,DejaVu Sans Mono,Ubuntu Mono,Anonymous Pro,Droid Sans Mono,Menlo,Monaco,Consolas,Inconsolata,Courier,monospace,PingFang SC,Microsoft YaHei,sans-serif!important

// CSDN的部分代码块的CSS选择器:
span.token, .prism-atom-one-dark .prism *

其中,只有 Ubuntu Mono 是免费可商用的,其他的都是商用需授权的字体。
另外,CSS选择器中有个 .prism-atom-one-dark,估计是因为我给自己的CSDN博客选的代码高亮主题为Atom One Dark吧。

// 掘金的部分代码块的字体格式:
Menlo,Monaco,Consolas,Courier New,monospace

// 掘金的部分代码块的CSS选择器:
.markdown-body code, .markdown-body pre
// 博客园的部分代码块的字体格式:
"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important

// 博客园的部分代码块的CSS选择器:
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea
// LeetCode在线代码编辑器的部分代码块的字体格式:
Consolas, "Courier New", monospace

// LeetCode的部分代码块的CSS选择器:
#lc-home > div > div.main__1pRE > div.css-wfkj6v-Content.e1aolq224 > div > div.css-1gcn2k5-RightContainer.e1aolq221 > div.css-pwvbgl-CodeAreaContainer.ejldciv0 > div.css-w8jsc9-EditorContainer.ejldciv1 > div > div.css-1sdn0mk.css-ilak5e-Container.euyvu2f0 > div > div.overflow-guard > div.monaco-scrollable-element.editor-scrollable.vs-dark > div.lines-content.monaco-editor-background > div.view-lines.monaco-mouse-cursor-text

LeetCode在线代码编辑器的样式是通过内联样式设置的,实际上,如果要通过CSS选择器选中编辑区DOM元素,只需要最后面那个选择器就可以了:div.view-lines.monaco-mouse-cursor-text

效果

在LeetCode上的显示效果:

image-20210921203643853

在CSDN和掘金以及博客园也都有相同的效果,但是脚本设置匹配的网址是所有网址,所以理论上所有网站中的代码块的字体都会是这样。如果不想要脚本的作用范围太大,可以通过 @match 来自行设置想让脚本生效的网址(支持正则)。