vue3 引入 wangeditor 富文本编辑器 与 highlight 代码高亮工具 的方法及注意事项

目录

• 什么是 Wangeditor
• 什么是 Highlight
• 1. 安装
• 2. 在main.js中引用
• 3. 在vue组件中使用 highlight
• • 3.1 < highlightjs > 用法（不推荐）
  • 3.2 v-higelight 用法（推荐）
• 4. 在vue组件中使用 wangeditor

什么是 Wangeditor

Wangeditor 是一款开源 Web 富文本编辑器，开箱即用，配置简单。

简洁易用，功能强大。快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。

支持 JS Vue React。不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。

什么是 Highlight

Highlight 是一款简洁、高效的代码高亮工具。它可以将你的代码转换为带有颜色和样式的 HTML 或 Markdown 文件，让你在博客、文档或演示文稿中展示代码。

Highlight 支持包括 Java、Python、JavaScript、C++、Ruby、PHP、Swift 在内的几十种编程语言。

Highlight 提供了多种预设的代码高亮样式，你可以根据自己的喜好选择最适合的一种。当然，你也可以自定义样式，让代码更具个性化。

1. 安装

推荐使用 Visual Studio Code 进行项目和代码的编写

vite（基于vite创建vue3项目）

npm create vite

wangeditor编辑器（两个都要安装ÿ