vue 中代码高亮与格式化

highlight 组件

highlight.js - npm (opens new window)

安装

npm install highlight.js
# or
yarn add highlight.js

Simply register the plugin with Vue:

Vue.use(hljs.vuePlugin);

And you'll be provided with a highlightjs component for use in your templates:

  <div id="app">
    <!-- bind to a data property named `code` -->
    <highlightjs autodetect :code="code" />
    <!-- or literal code works as well -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

在 vuepress 中使用

在 enhanceApp.js 中注册 highlight

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

export default ({
    Vue, options, router 
}) => {
    Vue.use(ElementUI);
    Vue.use(hljs.vuePlugin);
}

参考

vue中实现代码高亮，格式化_Chris__wang的博客-CSDN博客_vue代码高亮 (opens new window)