一直都用博客園寫博客，后面自己曾經想自己寫一個博客項目，但是因為各種各樣的事情最后做了一半就沒能繼續做下去。但是中間定制markdawn樣式的時候接觸到的代碼高亮插件highlight.js倒是給我留下了很深的影響，今天有時間於是決定利用當初的經驗重新diy一下博客園的代碼塊樣式，算是對夭折的博客項目的一個彌補吧。
一、下載highlight.js
可以去highlight.js官網直接下載。
下載完的文件里有highlight.pack.js，決定你的代碼哪里高亮，而styles文件夾存放各種樣式，決定你的代碼怎么樣高亮。
按照官網文檔引入三行代碼即可生效：
<!--選擇你想要的引入的樣式-->
<link rel="stylesheet" href="/path/to/styles/default.css">
<!--引入highlight.js-->
<script src="/path/to/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
可以自己建一個頁面試一試，樣式有很多種，我個人比較喜歡darcula.css這個樣式，接下來就以這個樣式為例。
二、將樣式引入博客園
首先自定義css需要開通自定義權限，這個跟着流程來即可，我就不再贅述了。
打開你想要引入的css樣式，復制代碼黏貼到“頁面定制css代碼”，
注意：這里要直接把css文件的代碼復制過來，而不是引用！
然后將js添加到“博客園側邊欄公告”
注意：這里不需要引入css！
這里js文件資源我直接放到了博客園自帶的文件倉庫了，要放自己的靜態資源倉庫，或者引用第三方都行，
然后保存以后代碼樣式就會發生變化。
但是仍然還會有各種各樣的小問題，比如字體和背景顏色不對之類的。
三、修復沖突的字體或背景顏色
一般主要問題都是字體或者背景顏色不對，我們直接覆蓋.cnblogs-markdown .hljs的樣式：
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
/* 替換背景和字體顏色 */
background: #2b2b2b !important;
color: #bababa !important;;
/* 代碼塊不換行 */
white-space: pre;
word-break: normal;
}
根據自己的需求修改代碼，然后把代碼添加到“頁面定制css代碼”就可以了
四、修改字體樣式或者代碼塊樣式
用chrome瀏覽器按F12查看你的文章頁面元素，然后可以發現：
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs這塊就是控制代碼塊字體和邊距的樣式，你可以直接根據自己的需求調整樣式然后直接黏貼到“頁面定制css代碼”里就行了。
博客園代碼塊默認邊距是5，字體大小是12，行高是1.5，我想讓換個好看的字體，順便行距大小啥的都大點：
@font-face {
font-family: consola;
src: url("http://static.xxxxx.top/consola.ttf");
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
font-family: consola !important;
font-size: 13px !important;
line-height: 1.7 !important;
padding: 10px !important;
}
五、前后樣式對比
原本的樣式：
保存之后的新樣式：
大功告成！