天天看點

百度ueditor編輯器代碼高亮

百度的ueditor是國内比較好用的富文本編輯器,這裡要講解的是ueditor中一個很小的功能:代碼高亮;

對于我們這些寫個部落格三句不離代碼的碼農們來說,能看到段高亮的代碼那欣喜是無以言表的;

沒圖我說個。。;上圖;以上篇文章為例;

示例環境:ueditor1.4.3

未高亮的代碼:

百度ueditor編輯器代碼高亮

代碼高亮後:

百度ueditor編輯器代碼高亮

如此大的反差;就不廢話再吹噓它的優美了;重點來說使用ueditor如何代碼高亮;

很簡單,但是很多人都不知道這個功能,或者是不知道怎麼用;

首先在編輯文章的時候選擇對應的代碼語言;

百度ueditor編輯器代碼高亮

然後在文章展示頁面的head頭内引入

<

script

type

=

"text/javascript"

src

=

"/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCore.js"

></

script

>

<

link

rel

=

"stylesheet"

href

=

"/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCoreDefault.css"

>

<

script

type

=

"text/javascript"

>

SyntaxHighlighter.all();

</

script

>

自行調整自己實際項目中的路徑即可;

繼續閱讀