Vue中使用Prismjs高亮TinyMCE富文本编辑保存的代码

1.安装Prism.js

cnpm install prismjs -S

2.安装prismjs编译器

cnpm install babel-plugin-prismjs -D

3.编辑babel配置

不同cli版本或模式的babel配置文件名不同，一般是放在babel.config.js、.babelrc、package.json这些文件中的某一个文件中

主要代码是plugins属性下包裹prismjs的这个数组，以下babel.config.js文件示例：

module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: [
        [
            'prismjs',
            {
                languages: ['javascript', 'css', 'markup', 'java', 'cpp', 'csharp', 'python', 'ruby', 'php'], //高亮语言类型
                plugins: ['line-numbers'], 
                theme: 'tomorrow', //主题
                css: true,
            },
        ],
    ],
};

4.组件内应用

<template>
    <div class="document-container" v-html="content"></div>
</template>

<script lang="ts">
import {Component, Prop, Watch, Vue } from 'vue-property-decorator';
import Prismjs from 'prismjs'; //引入插件

@Component({ name: 'DocumentPreview'})
export default class extends Vue {
    //文档数据
    private content: string = '';

   //挂载完成
   private async mounted() {
   		this.content = await this.getDocument();
        this.$nextTick(() => {
            Prism.highlightAll(); //数据渲染完成后执行一次
        });	
    }

    //获取文档详情
    private getDocument() {
        return this.$http.get(this.$api.DOCUMENT).then(
            (resolve: any) => {
                return resolve.data;
            }
        );
    }
}
</script>

<style lang="scss" scoped>
.document-container {
    min-height: 400px;
}
</style>

5.页面显示效果