修改代码主题等，提高阅读体验_html/css_WEB-ITnose

我对阅读体验的看法

在写 单例（Singleton）小记 这篇博文后，习惯性地点击查看浏览了一下，发现即使使用了 markdown ，感觉阅读体验还是有点差，总觉得还差点什么。为什么？主要是因为这篇博文使用了好几个代码例子，并且博客园的默认代码主题样式真的不怎么样。代码例子多了，这篇文章看起来就很单调，阅读体验极差。

阅读体验不好怎么办？对这个问题，不同的人会有不同的应对方法。或许有人将就一下就看下去了。但对于不愿将就的我来说，绝对不能就这样将就一下就算了。如果阅读体验真的很差，一般直接 Ctrl+w 说拜拜直接不看。因为我始终觉得一篇博文最重要的是阅读体验，如果阅读体验差，无论内容多好都会使博文大打折扣。因此，绝不允许自己的文章出现排版差、字体过小、单调等问题出现。

那么怎样才能提高阅读体验呢？ 一般的博文最主要的就是排版了，而且排版这个东西真心很烦人，但现在有了 markdown 就不用烦那么多了。直接使用 markdown 来写博文，不需要任何的排版知识都可以轻松写出排版效果极好的博文。而且我们作为程序猿都不用 markdown “语言”这有点说不过吧！ 排版解决后还要解决的就是字体。我觉得一篇博文的字体最重要的是字体的大小，用什么字体都不重要，宋体、微软雅黑什么的可以根据自己的喜欢来设（毕竟自己的博文除了给别人看，还要给自己看的，而且看的最多的就是自己了）。至于字体大小设成多大才好呢？个人觉得最好是 14px 到 17px 最佳，我用的是 16px 。排版和字体大小设好了，最后就要设置代码样式，毕竟我们都是程序猿，代码是少不了的^_^。

修改代码样式

当我想修改代码样式时，得出两种解决方案

1. 代码是在网页上显示的，要修改主题样式，肯定可以用 CSS 来设置。因此可以自己来自定义样式。但它有个缺点，自己来自定义就有重复造轮子的味道了，而且要支持多种语言的高亮，写起来代码量不少，自己又不是专攻前端的。因此可以否定这种做法。
   
2. 现在很多网站都有代码高亮，各种漂亮的主题都有。这种热门的轮子一般都会有人创造了。可以拿来就用。而且优点很明显，实现简单高效，并且可以轻松支持各种流行语言的代码高亮。因此优先选择该方案。

那么有什么插件或者库提供这种功能呢？呃。。第一次搞没经验，不知道～～ 唯有求助 Google 大神。简单得搜索 code highlight，第一条直接出现了 highlight.js。看名字就猜到应该是它。点进去了解后确定它就是我们要找的插件。（可能还有其他的插件，由于个人习惯一般选择 Google 搜索排前的）

使用 highlight.js 项目修改博客园的代码主题

好，废话了那么多，终于进入主题了。^_^

highlight.js 的用法，相信看了官方教程后大家都会了（做前端不用看教程都会了～～），因此在这只是简单的讲讲用法。官方主要提供了两种安装方法：

1. 在官网自定义需要的组件后，下载项目并把它用在自己的项目里。
   
2. 在 CDN 有包含 22 中常用语言的在线版。可以直接引用。

本人用的第二种方法。因此，我们只需简单地把下面的代码用在博客园的设置页面的页首Html代码（或者页脚Html代码）:

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

上面的代码有一点需要注意的是，default.min.css 表示我们要使用默认的代码高亮主题。你可以修改这个名字来更换其他的主题。要想知道有哪些主题以及它们的主题名，可以看官方展示。比如我使用的是 monokai_sublime 主题。因此我引人 CSS 的代码如下：

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

官方里还有一行是引入 javascript 代码的，但是我们这里只需要它的 CSS 代码。（它的js代码里有根据代码来检测代码是属于哪种语言的功能，但我一般喜欢使用 ` ` ` java ` ` ` 这种形式来设置语言所属，而且官方有提到自动检测不总是成功的。因此这里我不用 js 代码。）

以上就是使用 highlight.js 项目实现代码高亮，简单吧？不过，还没结束～～（现在不用急着扔鸡蛋～～ highlight 的使用就是这么简单，这里的转折是因为它与博客园样式冲突了）

修改博客园的样式，使 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>

好，现在 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;}

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

参考

参考？一直坚持给出参考文章，希望能提供读者一些扩展阅读和体验解决问题的过程。但这篇没参考到什么文件，全文都是自己”瞎逼逼“出来的，并没有什么权威的参考。因此，如果你发现了 bug 或者有更好的方法，可以在评论里共享出来^_^ 。

（PS. 最近要好好看书准备找暑假实习了，因此博客的更新频率可能会比较低～～。好吧，偏离原计划了～～ ----成长记录）