因為覺得博客園自帶的代碼高亮樣式很單一,不符合作為前端的我的審美習慣,于是下定決心要想辦法折騰出一個方法來應用上另外一套代碼高亮樣式。
雖然探索的過程是很痛苦的,但最后還是成功了,但也不枉付出的那些努力。近來有網友問及如何實現,現分享出來,看完本文后你也可以把自己博客的代碼整得漂亮些,讓別人看著舒服些了。
方法其實是很麻煩的,即使是寫了好幾篇博客了對這個過程我已經嫻熟了,但其實也還是挻麻煩的。不過誰叫我有是個偏執狂呢,為了讓頁面漂亮我愿麻煩自己,舒服大家。如果你有更好的方法那當然更好。
安裝sublimehighlight
我在博客里應用的樣式是SublimeText編輯器里面的主題,這跟我用它來編寫代碼有關。其實如果ST支持復制為富文本形式的話,事情就要方便得多,直接copy然后paste到word里就把樣式帶上了,包括縮進,代碼高亮等。遺憾的是它不支持。所以出路便是找一個可用的ST插件讓它支持富文本復制。
好在ST流行度大,社區活躍,插件眾多,還真有款能夠完成我需求的插件--n1k0/SublimeHighlight。更詳細的關于如何安裝的問題等可見它的項目頁面。
簡單點其實跟安裝其他ST插件是一樣的,先Ctrl+Shift+P調出control panel,然后輸入install package,不用輸完,當輸入了Install后便出來了,然后回車等待插件列表的顯示,這個過程大概有個幾秒鐘的樣子。
然后輸入插件名稱sublimehighlight,選中并進行安裝。如果這一步進行順利,則跳到下一節。
當你進行到上面一步發現搜不出該插件時,需要手動添加該插件的repo到本地。
具體做法是退出剛才的界面重新輸入Ctrl+Shift+P調出control panel,輸入add repository 選中并回車。
這時界面下方會出現輸入repo地址的地方,將https://github.com/n1k0/SublimeHighlight/tree/python3輸入后回車確定。
當提示添加成功后再次進行上面安裝插件的步驟來到插件列表,輸入sublimehighlight,選中該插件進行安裝,如果一切順利,恭喜你萬里長征第一步走完!
設置喜歡的代碼樣式
安裝完成后,可以設置你喜歡的樣式,這個樣式是你復制出來的樣式,跟你在ST里面用的代碼樣式是沒有關系的。也就是說最終復制出來的代碼的樣式以這個插件的設置為準。
可選的樣式可以在插件的GitHub主頁看到,下圖直接來自其項目頁面,圖中包括了主題的名稱和預覽:
設置方法是依次點開preferences=>package settings=>sublimehighlight=>settings - user
會調出一個設置頁面,輸入喜歡的樣式的名字,像下面這樣:
當然,還可以指定要使用的字體等其他設置選項,同樣,請前往插件主頁進行參考。
將代碼復制為HTML
像上面那樣弄好后,最后一步,就是把代碼復制成HTML形式放到博客里去啦!
依次點開edit=>highlight=>convert to html,此命令會將代碼轉成HTML形式。
之后,在新出來的標簽中,請將class為highlight的div直接ctrl+c復制。這一塊便是我們需要的東西。
最后,在寫博客的時候,以HTML方式編輯博客,將剛才的內容進行粘貼。噢啦!
確定之后的效果:
過程是有點麻煩吧,如果代碼量大的話,這個工作將會很惱人。Anyway, 完全看你愿不愿意了。Enjoy!
文章列表