Vue Prism Code Editor

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.

  • @input (code): when the code is changed
  • @keydown (event): when a keydown event happens in editor
  • @keyup (event): when a keyup event happens in editor
  • @click (event): when clicking anywhere in the editor
  • @focus (event): when focus
  • @blur (event): when blur

Preview:

Vue Prism Code Editor

Changelog:

09/27/2021

  • v1.3.0

Download Details:

Author: koca

Live Demo: https://prism-editor.netlify.com/

Download Link: https://github.com/koca/vue-prism-editor/archive/master.zip

Official Website: https://github.com/koca/vue-prism-editor

Install & Download:

# Yarn
$ yarn add vue-prism-editor

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

You Might Be Interested In:

Add Comment