Code fonts for beautifying web pages

Script installation address:

Reference: Change the font style of the web code block

Update log

V0.1

Updated on September 20, 2021 at 23:04:41

Update features:

1. Change the display style of LeetCode, CSDN, blog garden embedded Code (from the original Song Style to personal preference Cascadia Code or YaHei Consolas Hybrid or Lucida Console fonts (of course, provided the user has the corresponding font installed locally). Candidates such as Monacc, Monospace can also be added. If you want a different font that you like, just add the font name after the font family. Note that the font name is the name of the font that appears when the font file is opened. Such as:

V0.2

Updated 00:41:45, September 23, 2021

Update features:

1. Fixed the flash jump and displacement caused by the change of space character width when selecting text in the LeetCode editing area.

V0.3

Updated on September 24, 2021 at 16:17:07

Update features:

1. Fixed (or rather avoided) the cursor offset issue that occurred when LeetCode was set to YaHei Consolas Hybrid.

2. Change the font of LeetCode problem description area to Cascadia Code and YaHei Consolas Hybrid.

preface

I don’t know if anyone else feels that the fonts in the code section of the LeetCode problem area are a little bit unsightly, or maybe it’s because of the local font library on my computer… I’m going to change the font anyway… So the idea for this script came up.

// CSDN part of the code block font format: SourceCodePro,DejaVu Sans Mono,Ubuntu Mono,Anonymous Pro,Droid Sans Mono,Menlo,Monaco,Consolas,Inconsolata,Courier,monospace,PingFang SC,Microsoft YaHei,sans-serif! Portant // CSDN partial code block CSS selector:span.token..prism-atom-one-dark .prism *
Copy the code

Only Ubuntu Mono is commercially available for free, while the rest are commercially licensed fonts. In addition, the CSS selector has.prism-Atom-one-dark, probably because I chose the theme atom One Dark for my CSDN blog.

/ / the nuggets of a part of the code block font format: Menlo, Monaco, Consolas, Courier New, part of the code block monospace / / the Denver nuggets CSS selector:.markdown-body code..markdown-body pre
Copy the code

// Consolas, Bitstream Vera Sans Mono,Courier New,Courier, Monospace! Portant // blogosphere partial code block CSS selector:.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
Copy the code

// Consolas, "Courier New", Monospace // CSS selector for LeetCode:#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
Copy the code

The style of the LeetCode online code editor is set inline. In fact, if you want to select the edit area DOM element through the CSS selector, you only need the last selector: div.view-lines.monaco-mouse-cursor-text.

The effect

What it looks like on LeetCode:

CSDN and Nuggets and Blogosphere also have the same effect, but the script is set to match all urls, so in theory all blocks of code in the site will look like this. If you don’t want the script to have too much scope, you can use @match to set the url you want the script to work on (regex support).

Knowledge point record

1. How to determine if a font is free to use commercially

Updated: September 22, 2021 11:38:22

I posted this blog yesterday, but it was rejected, with the following tips:

Note: Cascadia Code and YaHei Consolas Hybrid fonts in the script are licensed fonts for commercial use. Please be aware of copyright and do not use these fonts for commercial use without authorization.

In addition, this script only suggests users to use the fonts recommended in the script when browsing the web, and does not provide users with the behavior of downloading relevant fonts, so there is no copyright issue involved. (If that’s what you’re worried about, don’t worry about it.) The script simply suggests that the user use the font to display the content, but it’s up to the user to decide whether to use it or not.

[Update end]

To find out if a font is available for free use, you can enter the font name on this website.

Updated on September 20, 2021 at 23:15:40

Reference: How to determine whether a font is commercially available? – zhihu

We are looking for a good helper to download, identify and preview Chinese and English font library

Reference: What are the most commonly used fonts in web design? (Chinese and English) – Zhihu

2. How to modify the font style of web pages through scripts

Updated on September 20, 2021 at 23:24:47

Reference: Oil Monkey Script to modify blog garden code display font and size – Developer knowledge base

Reasoner – Bloggarden Reference: Oilmonkey script modified page default font

3. Through the Settings@font-faceTo specify a font on the server

Updated on September 20, 2021 at 23:54:55

HTML5+CSS3 Basic Tutorial -76_ Still Silicon Valley _ font family. Mp4 | Beginner from beginner to master _bilibili _bilibili

Reference: Several ways to introduce special fonts to web pages – Jess_ meow – Blog garden

4, LeetCode online code editor cursor offset problem summary

Because there are a lot of holes, THIS is a separate issue for me. See another article for details:

Updated on September 24, 2021 at 16:55:54

LeetCode edit area cursor offset problem summary (oil monkey script; The font-family; Font width) _ Ian Lai’s blog -CSDN Blog

5. How to edit the Oilmonkey script in the local editor and synchronize it to the Oilmonkey extension

Updated: 01:03:52 On September 22, 2021

How to edit scripts with your favorite editor? – Violentmonkey