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

我对阅读体验的看法

在写 单例（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代码）:

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

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