ppypp伦理天堂,91手机在线视频,免费在线观看黄色毛片,夜夜穞天天穞狠狠穞AV美女按摩

聯系官方銷售客服

1835022288

028-61286886

投訴 分享 ueditor百度編輯器使用prismjs 插件實現代碼高亮 58 0
sky(全能人才) SVIP會員 OEM版權 2022-10-11 07:53:46 私信
迅睿CMS版本:4.6.0 #百度編輯器 #代碼高亮

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來構造,廢話不多說直接上代碼

闡述下邏輯:

  1. 首先遍歷所有的 <pre> 標簽,獲取其 class 屬性值。

  2. 使用 ; 號來分隔值,放入數組。

  3. 再次獲取數組第一個值,再次使用: 分隔,放入數組。數組內第二個值即為 html(代碼語種)

  4. 獲取 <pre> 標簽內容,放入 <code> 包裹起來,再次放入 <pre> 標簽。

下面代碼使用方式:頁面調用下載的prism.js和prism.css,然后把下面的代碼復制黏貼到最下面的js即可。

本部分內容設定了隱藏,需要回復后才能看到



解決方案