Modify code themes, etc. to improve reading experience_html/css

My views on the reading experience

After writing this blog post about Singleton, I habitually clicked to view it and browsed it, and found that even if markdown is used, I feel that the reading experience is still a bit poor, and I always feel that something is missing. Why? Mainly because this blog post uses several code examples, and the default code theme style of the blog park is really not good. With too many code examples, this article looks monotonous and the reading experience is extremely poor.

What should I do if my reading experience is not good? Different people have different ways of dealing with this problem. Maybe some people will just stop reading it. But for me who doesn’t want to make do with it, I definitely can’t just make do with it. If the reading experience is really bad, usually just Ctrl w to say goodbye and stop reading. Because I always feel that the most important thing about a blog post is the reading experience. If the reading experience is poor, no matter how good the content is, the blog post will be greatly compromised. Therefore, you must never allow your articles to have problems such as poor layout, too small fonts, and monotony.

So how can we improve the reading experience? The most important thing for a general blog post is typesetting, and typesetting is really annoying, but now with markdown, you don’t have to worry so much. Use markdown directly to write blog posts. You can easily write blog posts with excellent layout effects without any knowledge of typesetting. And as programmers, we don’t use markdown “language”, which is a bit unreasonable! After typesetting is solved, the next thing to solve is the font. I think the most important font for a blog post is the font size . It doesn’t matter what font you use. You can set it up according to your own preferences, such as Song Dynasty, Microsoft YaHei, etc. (after all, your blog posts are not only for others. Look, you have to show it to yourself, and the one who sees it the most is yourself). As for how large the font size should be? Personally, I think 14px to 17px is the best. I use 16px. After the typesetting and font size are set, the last step is to set the code style. After all, we are all programmers, and code is indispensable^_^.

Modify the code style

When I want to modify the code style, I came up with two solutions

The code is displayed on the web page, and I need to modify the theme style , it can definitely be set using CSS. So you can customize the style yourself. But it has a shortcoming. Customizing it yourself feels like reinventing the wheel, and it has to support highlighting in multiple languages. It takes a lot of code to write, and I am not specialized in front-end. This approach can therefore be denied.
Many websites now have code highlighting, and there are various beautiful themes. This popular wheel is usually created by someone. You can use it as you go. And the advantages are obvious, the implementation is simple and efficient, and it can easily support code highlighting in various popular languages. Therefore this option is preferred.

So what plug-ins or libraries provide this functionality? Well. . It’s my first time and I have no experience, so I don’t know~~ I can only ask the experts of Google for help. Simply search for code highlight, and the first one appears directly: highlight.js. You can guess it by looking at the name. Click in to learn more and make sure it is the plug-in we are looking for. (There may be other plug-ins. Due to personal habits, I usually choose the one ranked first in Google search)

Use the highlight.js project to modify the code theme of the blog garden

Okay, after all the nonsense, finally Entering the topic. ^_^

I believe everyone will know how to use highlight.js after reading the official tutorial (you don’t need to read the tutorial to do front-end work~~), so here I will just briefly talk about the usage. The official mainly provides two installation methods:

After customizing the required components on the official website, download the project and use it in your own project.
The CDN has online versions in 22 commonly used languages. Can be quoted directly.

The second method I use. Therefore, we only need to simply use the following code in the header Html code (or footer Html code) of the settings page of the blog garden:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">

Copy after login

One thing to note about the above code is that, default.min.css means we want to use the default code highlighting theme. You can change this name to change other themes. To know what themes there are and their theme names, you can see the official display. For example, I am using the monokai_sublime theme. Therefore, my code to introduce CSS is as follows:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/monokai_sublime.min.css">

Copy after login

There is also a line in the official website that introduces javascript code, but we only need its CSS code here. (Its js code has a function to detect which language the code belongs to based on the code, but I generally like to use ` ` ` java ` ` ` to set the language, and the official provides Automatic detection is not always successful. So I don’t use js code here. )

The above is to use the highlight.js project to implement code highlighting, isn’t it simple? However, it’s not over yet~~ (No need to rush to throw eggs now~~ The use of highlight is so simple. The twist here is that it conflicts with the blog garden style)

修改博客园的样式，使 highlight 正常工作。

我们使用正确使用了 highlight 了，但是我们还要修改下博客园的样式来完美地显示 highlight 样式。博客园给每个用户都提供了一个叫 blog-common.css 的样式，里面包含了代码主题的样式。要使我们的 highlight 样式完美地显示，我们要把 blog-common.css 里的代码主题样式删掉。但是这里有个问题：blog-common.css 是博客园提供给我们的，我们无法修改它的代码，如何才能删掉它里面的代码呢？

经过片刻的思考后，发现只能把整个文件都删掉才能实现删除它里面的代码，但这个文件里还有其他的样式是我想要的，怎么办？经典作弊手法： copy --> 改。所谓的 copy --> 改就是把 blog-common.css 的代码复制得到我们的 页面定制CSS代码 里然后修改（删除我们不要的，要至于删那些样式，我们可以用查看元素来查看那些样式是代码高亮的样式，然后把它们删掉，相信大家都懂的了，在此不累赘）。最后把 blog-common.css 删掉。

在页首 Html 代码或者页脚 Html 代码里添加删除 blog-common.css 的代码（需要 js 权限）：

<script>document.getElementsByTagName("link")[0].remove()</script>

Copy after login

好，现在 highlight 样式就可以完美地显示了。 enjoy ！

最后

我同样不太喜欢默认的引用样式，因此添加上我的 markdown 引用的样式，喜欢的人可以拿去：

blockquote {    background-color: rgba(102, 128, 153, 0.05);    color: #5F5656;    margin-left: 25px;    padding: 5px 10px;    margin-top: 10px;    margin-bottom: 10px;    border-left: 5px solid #352D2D;}

Copy after login

最后，希望这篇文章能够帮助那些注重阅读体验的朋友，给大家带来惊喜！