Vue Prism Code Editor

Install & Download:

# Yarn
$ yarn add vue-prism-editor
# NPM
$ npm install vue-prism-editor --save

Description:

A dead simple code editor with syntax highlighting and line numbers.

Features:

Code Editing
Syntax highlighting
Undo / Redo
Copy / Paste
The spaces/tabs of the previous line is preserved when a new line is added
Works on mobile (thanks to contenteditable)
Resize to parent width and height
Support for line numbers
Support for autosizing the editor
Autostyling the linenumbers(optional)

How to use it:

1. Import and register the Prism Code Editor.

// core
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
// import a syntax highlighting library
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-tomorrow.css';

// locallyexport default {
  components: {
    PrismEditor,
  },
};
// globally
Vue.component('PrismEditor', PrismEditor);

2. Add the prism code editor to the template.

<template>
  <prism-editor class="my-editor" v-model="code" :highlight="highlighter" line-numbers></prism-editor>
</template>

export default {
  components: {
    PrismEditor,
  },
  data: () => ({ code: 'console.log("Hello World")' }),
  methods: {
    highlighter(code) {
      return highlight(code, languages.js);
  },
};

3. Available component props.

lineNumbers: {
  type: Boolean,
  default: false,
},
autoStyleLineNumbers: {
  type: Boolean,
  default: true,
},
readonly: {
  type: Boolean,
  default: false,
},
value: {
  type: String,
  default: '',
},
highlight: {
  type: Function,
  required: true,
},
tabSize: {
  type: Number,
  default: 2,
},
insertSpaces: {
  type: Boolean,
  default: true,
},
ignoreTabKey: {
  type: Boolean,
  default: false,
},
placeholder: {
  type: String,
  default: '',
},

4. Events.