我對閱讀體驗的看法
在寫 單例（Singleton）小記 這篇博文后，習慣性地點擊查看瀏覽了一下，發現即使使用了 markdown ，感覺閱讀體驗還是有點差，總覺得還差點什么。為什么？主要是因為這篇博文使用了好幾個代碼例子，並且博客園的默認代碼主題樣式真的不怎么樣。代碼例子多了，這篇文章看起來就很單調，閱讀體驗極差。
閱讀體驗不好怎么辦？對這個問題，不同的人會有不同的應對方法。或許有人將就一下就看下去了。但對於不願將就的我來說，絕對不能就這樣將就一下就算了。如果閱讀體驗真的很差，一般直接 Ctrl+w 說拜拜直接不看。因為我始終覺得一篇博文最重要的是閱讀體驗，如果閱讀體驗差，無論內容多好都會使博文大打折扣。因此，絕不允許自己的文章出現排版差、字體過小、單調等問題出現。
那么怎樣才能提高閱讀體驗呢？ 一般的博文最主要的就是排版了，而且排版這個東西真心很煩人，但現在有了 markdown 就不用煩那么多了。直接使用 markdown 來寫博文，不需要任何的排版知識都可以輕松寫出排版效果極好的博文。而且我們作為程序猿都不用 markdown “語言”這有點說不過吧！ 排版解決后還要解決的就是字體。我覺得一篇博文的字體最重要的是字體的大小，用什么字體都不重要，宋體、微軟雅黑什么的可以根據自己的喜歡來設（畢竟自己的博文除了給別人看，還要給自己看的，而且看的最多的就是自己了）。至於字體大小設成多大才好呢？個人覺得最好是 14px 到 17px 最佳，我用的是 16px 。排版和字體大小設好了，最后就要設置代碼樣式，畢竟我們都是程序猿，代碼是少不了的_。
修改代碼樣式
當我想修改代碼樣式時，得出兩種解決方案
- 代碼是在網頁上顯示的，要修改主題樣式，肯定可以用 CSS 來設置。因此可以自己來自定義樣式。但它有個缺點，自己來自定義就有重復造輪子的味道了，而且要支持多種語言的高亮，寫起來代碼量不少，自己又不是專攻前端的。因此可以否定這種做法。
- 現在很多網站都有代碼高亮，各種漂亮的主題都有。這種熱門的輪子一般都會有人創造了。可以拿來就用。而且優點很明顯，實現簡單高效，並且可以輕松支持各種流行語言的代碼高亮。因此優先選擇該方案。
那么有什么插件或者庫提供這種功能呢？呃。。第一次搞沒經驗，不知道～～ 唯有求助 Google 大神。簡單得搜索 code highlight，第一條直接出現了 highlight.js。看名字就猜到應該是它。點進去了解后確定它就是我們要找的插件。（可能還有其他的插件，由於個人習慣一般選擇 Google 搜索排前的）
使用 highlight.js 項目修改博客園的代碼主題
好，廢話了那么多，終於進入主題了。_
highlight.js 的用法，相信看了官方教程后大家都會了（做前端不用看教程都會了～～），因此在這只是簡單的講講用法。官方主要提供了兩種安裝方法：
- 在官網自定義需要的組件后，下載項目並把它用在自己的項目里。
- 在 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. 最近要好好看書准備找暑假實習了，因此博客的更新頻率可能會比較低～～。好吧，偏離原計划了～～ ----成長記錄）