Vue中通过highlight.js实现代码高亮

npm install highlight.js --save 或 yarn add highlight.js

/**
 * 自定义代码高亮插件
 */
import hljs from ‘highlight.js‘
import ‘highlight.js/styles/vs.css‘

const install = function (Vue) {
    Vue.directive(‘highlight‘, {
        deep: true,
        bind (el, binding) {
            // on first bind, highlight all targets
            let targets = el.querySelectorAll(‘code‘)

            targets.forEach(target => {
                if (typeof binding.value === ‘string‘) {
                    // if a value is directly assigned to the directive, use this
                    // instead of the element content.
                    target.textContent = binding.value
                }
                hljs.highlightBlock(target)
            })
        },
        componentUpdated (el, binding) {
            // after an update, re-fill the content and then highlight
            let targets = el.querySelectorAll(‘code‘)

            targets.forEach(target => {
                if (typeof binding.value === ‘string‘) {
                    // if a value is directly assigned to the directive, use this
                    // instead of the element content.
                    target.textContent = binding.value
                    hljs.highlightBlock(target)
                }
            })
        },
    })

}

if (window.Vue) {
    window[‘highlight‘] = highlight
    Vue.use(install) // eslint-disable-line
}

export default install

// highlight.js代码高亮插件
import Highlight from ‘./directive/highlight‘; // 这里是你项目highlight.js所在路径
Vue.use(Highlight);

pre v-highlight="sourcecode">code>code>pre>


pre v-highlight>code>const s = new Date().toString()code>pre>