聯系官方銷售客服
1835022288
028-61286886
ueditor百度編輯器 使用 prismjs 插件 實現代碼高亮
ueditor百度編輯器 官方免費插件
prismjs.com 下載prism即可,下載方法建議百度,這里就不說了,很簡單得。
下載的prism.js 和prism.css記得調用
先上效果圖
<pre class="brush:js;toolbar:false;"> xxx </pre>
這個代碼是百度編輯器自帶得一個代碼,
<pre><code class="language-css">p { color: red }</code></pre>
而prismjs 需要的是 中間要有個<pre><code class="language- 語言"></code></pre>
注:后臺的話嘗試過修改編輯器代碼 幾萬條代碼看的是眼花繚亂,勉強能實現,重復點擊會失效,搞了兩個小時就想想前臺能不能改
百度查到的相結合可以完美實現,利用的是JS來構造,廢話不多說直接上代碼
闡述下邏輯:
首先遍歷所有的 <pre>
標簽,獲取其 class
屬性值。
使用 ;
號來分隔值,放入數組。
再次獲取數組第一個值,再次使用:
分隔,放入數組。數組內第二個值即為 html
(代碼語種)
獲取 <pre>
標簽內容,放入 <code>
包裹起來,再次放入 <pre>
標簽。
下面代碼使用方式:頁面調用下載的prism.js和prism.css,然后把下面的代碼復制黏貼到最下面的js即可。
哈,看看優秀列子,謝謝
看看怎么實現的
學習一下學習一下
回復@叢林灰太狼 學習一下學習一下
如果您對我們的服務滿意,可以購買迅睿SVIP會員,來支援一下官方團隊
哈,看看優秀列子,謝謝
正需要這玩意
好東西,值的學習、收藏
回復@叢林灰太狼
看看優秀列子,謝謝
學習一下,看看怎么實現的
怎么實現代碼過長自動換行
來學習,新年快樂
??
官網編輯器有插入代碼功能,為啥xunruicms系統自帶編輯器要yan割插入代碼功能。
yan割就yan 割吧,還沒有一款代碼高亮插件可用 ?? ?? ?? ??
看看學習下
學習學習怎么用