vue前端展示代码块

使用vue-prism-editor包

vue3使用 npm install vue-prism-editor@alpha

npm install prismjs 需要用到此组件

template

js

    import {
        PrismEditor
    } from 'vue-prism-editor';
    import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

    // import highlighting library (you can use any library you want just return html string)
    import {
        highlight,
        languages
    } from 'prismjs/components/prism-core';
    import 'prismjs/components/prism-clike';
    import 'prismjs/components/prism-javascript';
    import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles

export default {
    components: {
            PrismEditor
        },
     data() {
        return {
            code： ''
        }
     },
    methods: {
         highlighter(code) {
                return highlight(code, languages.js) // returns html
         },
    }
}

css