博客園是一個廣大程序員的博客技術論壇,在上面可以看別人寫到的博文,也可以自己寫博文,博客園默認的編輯器類似於Word
但一般的程序員都會選擇使用markdown寫博文,那么怎么把博客園的編輯器設置為markdown,又怎么為代碼部分添加自己喜歡的高亮樣式呢?下面就介紹一下
將博客園的默認編輯器設置為markdown
登錄博客園后,依次找到管理->設置默認編輯器(還有其他方式),然后在默認編輯器一欄勾選markdown:
這樣博客園的默認編輯器就變成了markdown:
將在markdown中的代碼部分進行語法高亮
如下圖:
步驟:
1.找到你所喜歡的高亮主題
打開Hightlightjs的demo頁面 選擇你所喜歡的高亮主題。我選擇的是Atom One Dark Reasonable這個主題。
2.下載對應高亮主題的源碼
到GitHub找到Hightlight對應主題的源碼:highlightjs/highlight.js代碼高亮主題名稱與Github中的css代碼名稱一一對應。比如我選擇的主題名稱為Atom One Dark Reasonable,其對應的css代碼為:atom-one-dark-reasonable.css,打開相應代碼,將其源碼復制並保存到本地即可。
3.修改css代碼以適應cnblogs的markdown語法高亮樣式
打開下載的源碼,將.hljs全部替換為 .cnblogs-markdown .hljs
ps:博客園默認的markdown樣式可能被設置為:!important,因此要想讓自定義的樣式覆蓋博客園默認的樣式,可能在每個屬性后都需要加上!important。
4.將處理后的css代碼復制到博客園頁面定制css代碼欄中
博客園管理頁面->設置->頁面定制CSS代碼
注意:不要勾選“禁用模板默認CSS”
點擊保存之后你就可以新建一篇隨筆或文章並使用markdown編輯方式插入代碼,下面是我選擇的主題名稱為Atom One Dark Reasonable在cnblogs上的效果圖。
效果:
在博客園用markdown寫博客時怎么上傳圖片?
寫博客時,為了舉例說明等,需要使用到圖片,常規編輯器直接拖拽即可,那么在markdown中怎么引用圖片呢?
可能有很多種方法,這里用一個自認為簡單的東西:在谷歌中安裝新浪圖床插件,下面介紹怎么使用
1.下載該插件(這里先將插件下載到本地)
github地址:新浪微博圖床 Chrome擴展
然后將下載的壓縮包進行解壓
2.chrome瀏覽器中安裝下載的插件
找到設置->擴展程序->加載本地解壓的新浪圖文插件的文件夾
安裝成功界面:
3.使用新浪圖文插件
打開谷歌右上角的新浪小圖標:
然后在插件彈出頁面即可直接拖拽上傳,獲取相應的url地址
然后在markdown中使用圖片:

這樣在文章中便可以很愉快的插入圖片了!!!!!
ps:若該插件提示未登錄微博,則需要先登錄微博,打開微博官網,然后登錄即可