CKEditor5 代码块美化、代码高亮

引言

关于怎么集成CKEditor5，可以看我上一篇文章

美化

下载包

npm i prismjs vite-plugin-prismjs 

配置vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import prismjs from 'vite-plugin-prismjs';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    prismjs({
      // languages: ['json'],
      languages: 'all',//高亮所有代码
      plugins: [
        "line-numbers",//配置显示行号插件
        "inline-color",//突出颜色块
        "toolbar",//复制栏按钮...
        "copy-to-clipboard"//复制代码功能

      ], 
      theme: "okaidia", //主题 →  funky科技感 okaidia暗系1 tomorrow暗系2 dark暗系3 twilight黑色  coy清新 default默认 solarizedlight明亮
      css: true,
    }),
  ],
  base: "./",
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

vue中开始渲染

编辑页面不推荐导入Prismjs高亮。

使用primsjs高亮代码时，html结构如下

 <pre
      lang="zh-Hans-CN"
      data-prismjs-copy="复制"
      data-prismjs-copy-error="复制失败,刷新再试"
      data-prismjs-copy-success="已复制！"
      class="line-numbers"
    >
    
    <code class="language-js">
        console.log(123)
    </code>
</pre>

但是ckexitor5渲染后的代码块结构不一样，找到所有需要高亮的pre标签，然后添加高亮属性与类名

const presEl = document.querySelectorAll('.ck-content pre')

for (let index = 0; index < presEl.length; index++) {
  const element = array[index];
  element.setAttribute("lang", 'zh-Hans-CN')
  element.setAttribute("data-prismjs-copy", '复制')
  element.setAttribute("data-prismjs-copy-error", '复制失败,刷新再试')
  element.setAttribute("data-prismjs-copy-success", '已复制')
  element.setAttribute("class", 'line-numbers')
}
Prism.highlightAll()

参考案例

<template>
  <div class="ck-content" v-html='data'></div>
</template>
<script>
import "@ckeditor/ckeditor5-build-classic/build/styles.css"

export default {
  data() {
    return {
      data:""//渲染的数据
    };
  },
  mounted() {
    //设置高亮属性
      const presEl = document.querySelectorAll('.ck-content pre')

      for (let index = 0; index < presEl.length; index++) {
        const element = presEl[index];
        element.setAttribute("lang", 'zh-Hans-CN')
        element.setAttribute("data-prismjs-copy", '复制')
        element.setAttribute("data-prismjs-copy-error", '复制失败,刷新再试')
        element.setAttribute("data-prismjs-copy-success", '已复制')
        element.setAttribute("class", 'line-numbers')
      }
      Prism.highlightAll()
  },
}
</script>

 上效果图

由于懒得用markdown，所以自己开发的记笔记工具， 迭代好几个版本了，有需要的到我发布的资源里下载就行。