修改代碼主題等，提升閱讀體驗

我對閱讀體驗的見解

在寫 單例（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. 最近要好好看書準備找暑假實習了，所以博客的更新頻率可能會比較低～～。好吧，偏離原計劃了～～ ----成長記錄）