简陋的简单代码编辑器，带有语法突出显示和行号。

变更日志：

2020/08/08

• v1.0.1

特征：

• 代码编辑
• 语法高亮
• 撤销重做
• 复制粘贴
• 添加新行时，保留前一行的空格/制表符
• 可在移动设备上使用（感谢contenteditable）
• 调整为父级宽度和高度
• 支持行号
• 支持自动编辑编辑器
• 自动设置行号（可选）

安装和下载：

# Yarn
$ yarn add vue-prism-editor

# NPM
$ npm install vue-prism-editor --save

用法

在本地注册组件并使用（推荐）

<template>
  <prism-editor :code="code" language="js"></prism-editor>
</template>

<script>
import PrismEditor from 'vue-prism-editor'
export default {
  components: {
    PrismEditor
  }
}
</script>

或在以下位置全局注册组件 main.js

import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/VuePrismEditor.css"; // 导入风格
Vue.component("prism-editor", VuePrismEditor);

浏览器用法：

<!-- vue-prism-editor JavaScript -->
<script src="https://unpkg.com/vue-prism-editor"></script>

<!-- vue-prism-editor CSS -->
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css">

<!-- use -->
<script>
Vue.component('vue-prism-editor', VuePrismEditor)
new Vue({
    el: '#app'
})
</script>

Prismjs

该软件包不会安装Prismjs。如果您使用Prismjs，则已经跳过此步骤。如果不是，则需要在应用程序中的某个位置加载Prismjs：

// yarn 添加 prismjs
import "prismjs";
import "prismjs/themes/prism.css";

要么：

<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<script src="https://unpkg.com/prismjs"></script>

Props

事件

除非您将emitEventsprop 设置为，否则不会触发以下事件true。