vue在线编辑器

<template>
  <div id="app">
    <textarea v-model="code"></textarea>
    <div v-highlight v-html="highlightedCode"></div>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  data() {
    return {
      code: ''
    };
  },
  computed: {
    highlightedCode() {
      return hljs.highlightAuto(this.code).value;
    }
  }
};
</script>

<style>
textarea {
  width: 100%;
  height: 200px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 <textarea> 元素来让用户输入代码，通过 v-model 指令将用户输入的内容绑定到组件的 code 数据属性上。
   • 使用了一个 <div> 元素来显示高亮后的代码，通过 v-html 指令将计算属性 highlightedCode 的值插入到该元素中，并使用 v-highlight 自定义指令来应用高亮样式。

2. 脚本部分 (<script>):

   • 引入了 highlight.js 库及其样式文件，用于代码高亮。
   • 定义了一个 data 函数，返回一个包含 code 属性的对象，用于存储用户输入的代码。
   • 定义了一个 computed 计算属性 highlightedCode，它会根据用户输入的代码自动进行语法高亮处理。

3. 样式部分 (<style>):

   • 设置了 <textarea> 的宽度为 100%，高度为 200px，以确保有足够的空间供用户输入代码。