使用markdown編寫博客園博客並設置代碼高亮等


博客園是一個廣大程序員的博客技術論壇,在上面可以看別人寫到的博文,也可以自己寫博文,博客園默認的編輯器類似於Word
但一般的程序員都會選擇使用markdown寫博文,那么怎么把博客園的編輯器設置為markdown,又怎么為代碼部分添加自己喜歡的高亮樣式呢?下面就介紹一下

將博客園的默認編輯器設置為markdown

登錄博客園后,依次找到管理->設置默認編輯器(還有其他方式),然后在默認編輯器一欄勾選markdown:
markdownedit.png

這樣博客園的默認編輯器就變成了markdown:
微信截圖_20200115192225.png

將在markdown中的代碼部分進行語法高亮

如下圖:
微信截圖_20200115192345.png

步驟

1.找到你所喜歡的高亮主題

打開Hightlightjs的demo頁面 選擇你所喜歡的高亮主題。我選擇的是Atom One Dark Reasonable這個主題。
微信截圖_20200115192742.png

2.下載對應高亮主題的源碼

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

3.修改css代碼以適應cnblogs的markdown語法高亮樣式

打開下載的源碼,將.hljs全部替換為 .cnblogs-markdown .hljs
微信截圖_20200115193159.png

ps:博客園默認的markdown樣式可能被設置為:!important,因此要想讓自定義的樣式覆蓋博客園默認的樣式,可能在每個屬性后都需要加上!important。

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

博客園管理頁面->設置->頁面定制CSS代碼
注意:不要勾選“禁用模板默認CSS”

1001136-20191215210731802-580955926.png

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

在博客園用markdown寫博客時怎么上傳圖片?

寫博客時,為了舉例說明等,需要使用到圖片,常規編輯器直接拖拽即可,那么在markdown中怎么引用圖片呢?
可能有很多種方法,這里用一個自認為簡單的東西:在谷歌中安裝新浪圖床插件,下面介紹怎么使用

1.下載該插件(這里先將插件下載到本地)

github地址:新浪微博圖床 Chrome擴展
微信截圖_20200115194522.png

然后將下載的壓縮包進行解壓

2.chrome瀏覽器中安裝下載的插件

找到設置->擴展程序->加載本地解壓的新浪圖文插件的文件夾
微信截圖_20200115194758.png

安裝成功界面:
微信截圖_20200115194849.png

3.使用新浪圖文插件

打開谷歌右上角的新浪小圖標:
微信截圖_20200115195052.png

然后在插件彈出頁面即可直接拖拽上傳,獲取相應的url地址
微信截圖_20200115195225.png

然后在markdown中使用圖片:

![微信截圖_20200115195225.png](http://ww1.sinaimg.cn/large/007gxmUjgy1gaxhpw72gnj30lb0dpmyd.jpg)

這樣在文章中便可以很愉快的插入圖片了!!!!!

ps:若該插件提示未登錄微博,則需要先登錄微博,打開微博官網,然后登錄即可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM