您所在的位置:小祥子 » 编程 » CSS » 正文

修改代码主题等,提高阅读体验

时间:2015-05-17 编辑:孤光 来源:本站整理

我对阅读体验的看法

在写 单例(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. 最近要好好看书准备找暑假实习了,因此博客的更新频率可能会比较低~~。好吧,偏离原计划了~~ ----成长记录)

关键词:代码