vue中富文本框设置代码高亮

1、安装

npm install vue-quill-editor --save -dev // 富文本
npm install highlight.js --save -dev // 代码高亮

2、在 main.js 中引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble themeimport 'highlight.js/styles/monokai-sublime.css'; // 代码高亮样式
Vue.use(VueQuillEditor)

3、在 需要使用富文本框的组件中

// html 代码部分

// js
import hljs from 'highlight.js';// data 数据部分
data(){ return{ content:'', editorOption: {modules: { toolbar: [["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], [{ font: [] }], [{ align: [] }], ["clean"], ["link", "image", "video"]],syntax: { highlight: text => { return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方 }}}}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！