作為一個工程師，追求極致與藝術也應當成為我們生活中的一部分，作為自己的心愛之物——博客，當然也得裝扮一下，我對代碼高亮有自己所喜歡的風格~還好程序員的世界總是共通的，已經有前輩開發了一些代碼高亮的樣式可供我們開箱即用。Highlightjs就是這樣一款產品。

下面介紹一下我是如何將這款產品應用于博客園markdown編輯器中的。

第一步，找到你所喜歡的高亮主題

打開Hightlightjs的demo頁面 選擇你所喜歡的高亮主題。我選擇的是Atom One Dark Reasonable這個主題。

圖1 在Hightlight中挑選自己喜歡的高亮主題

第二步，下載對應高亮主題的源碼

到GitHub找到Hightlight對應主題的源碼：highlightjs/highlight.js代碼高亮主題名稱與Github中的css代碼名稱一一對應。比如我選擇的主題名稱為Atom One Dark Reasonable，其對應的css代碼為：atom-one-dark-reasonable.css，打開相應代碼，將其源碼復制并保存到本地即可。

圖2 在GitHub下載高亮主題相應的css源碼

第三步，修改css代碼以適應cnblogs的markdown語法高亮樣式

用UltraEdit編輯器打開剛剛下載的css源碼，將 .hljs替換為 .cnblogs-markdown .hljs 選擇 替換->當前文件->全部替換

圖3 將 .hljs替換為 .cnblogs-markdown .hljs

第四步，將處理后的css代碼復制到博客園頁面定制css代碼欄中

博客園管理頁面->設置->頁面定制CSS代碼

注意：不要勾選“禁用模板默認CSS”

圖4 將處理后的css代碼復制到博客園頁面定制css代碼欄中

點擊保存之后你就可以新建一篇隨筆或文章并使用markdown編輯方式插入代碼，下面是我選擇的主題名稱為Atom One Dark Reasonable在cnblogs上的效果圖。

圖5 Atom One Dark Reasonable高亮主題在cnblogs上的效果圖

后續

到這里就已經完成了自定義代碼風格的設置?？赡苣阍O置完成后發現和hightlight demo上看到的不太一樣，可能是代碼的字體，背景顏色等等略有差異。只要你懂一點CSS，自己微調一下所下載的CSS代碼中的相關屬性，直到自己滿意為止。我的代碼風格可以在我的其他文章中看到，感興趣的可以戳一戳我的其他博文~ ?(?>?

如果在配置過程中遇到什么問題，也歡迎私信我，或者郵件跟我說一下相關困難。

總結

以上是生活随笔為你收集整理的markdown mysql高亮_修改博客园markdown编辑器代码高亮风格的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。