vue前端展示代码块

使用vue-prism-editor包

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

npm install prismjs 需要用到此组件

template

 <prism-editor 
    class="my-editor" 
    v-model="code" 
    aria-disabled     
    :highlight="highlighter" 
    line-numbers 
    :readonly="false" 
    :tabSize="4"></prism-editor>
                                    

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

<style scoped>
 .my-editor {
        background: #2d2d2d;
        color: #ccc;
        font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
        font-size: 14px;
        line-height: 1.5;
        padding: 5px;
        margin-top: 10px;
    }
    
    .my-editor-title {
        color: white;
        margin-top: 10px
    }
    
    .prism-editor__textarea:focus {
        outline: none
    }
</style>