Vue Prism Editor：优雅的代码编辑器组件

<template>
  <prism-editor
    class="my-editor"
    v-model="code"
    :highlight="highlighter"
    line-numbers
  ></prism-editor>
</template>
 
<script>
import { PrismEditor } from 'vue-prism-editor';
import 'prismjs';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-sql';
import 'vue-prism-editor/dist/prismeditor.min.css';
 
export default {
  components: {
    PrismEditor
  },
  data() {
    return {
      code: 'SELECT * FROM my_table;',
    };
  },
  methods: {
    highlighter(code) {
      return Prism.highlight(code, Prism.languages.sql, 'sql');
    }
  }
};
</script>
 
<style>
.my-editor {
  /* 定制编辑器的样式 */
}
</style>

这个例子展示了如何在Vue应用中集成vue-prism-editor组件，并为编辑器设置了一些基本的样式。代码中使用了Prism.highlight方法来进行语法高亮，并且指定了高亮的语言类型为SQL。这个例子简洁明了，并且可以作为开发者在集成代码编辑器时的一个很好的参考。