vue js代码编辑插件(vue-prism-editor)

示例：https://prism-editor.netlify.com/
插件地址：https://github.com/koca/vue-prism-editor

安装

npm install vue-prism-editor

or

yarn add vue-prism-editor

使用姿势

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

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

或者

import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles
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，需要额外自己安装。

// yarn add 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

Name	Type	Default	Options	Description
v-model	string	-	-	for the code prop below
code	string	""	-	the code
language	String	"js"	vue,html,md,ts + Prismjs Languages	language of the code
lineNumbers	Boolean	false	-	Whether to show line numbers or not
readonly	Boolean	false	-	Indicates if the editor is read only or not.
emitEvents	Boolean	false	-	Indicates if the editor should emit events.
autoStyleLineNumbers	Boolean	true	-	Allow the line number to be styled by this component.

Events

Name	Parameters	Description
change	(code)	Fires when the code is changed.

The events below won’t be fired unless you set the emitEvents prop to true.

Name	Parameters	Description
keydown	(event)	This event is emitted when a keydown event happens in editor
keyup	(event)	This event is emitted when a keyup event happens in editor
editor-click	(event)	This event is emitted when clicking anywhere in the contenteditable editor

一个完整实例

<template>
<prism-editor :code="mycode" :lineNumbers="true"
               @change="codeChanged" language="python"></prism-editor>
</template>
<script>  
  import Vue from 'vue';
  import PrismEditor from 'vue-prism-editor';
  import "vue-prism-editor/dist/VuePrismEditor.css";
  //引入prismjs相关的包
  import "prismjs";
  import "prismjs/components/prism-python";
  import "prismjs/components/prism-python.min";
  //自己喜欢的主题
  import "prismjs/themes/prism-tomorrow.css";

  Vue.component("prism-editor", PrismEditor);     
   export default {
    data() {
      return {
        mycode: 'import json'       
      }
    },
    methods: {
      codeChanged(_code){
        window.console.log(_code);
      }
    }
  }
</script>