vue-prism-editor

Vue Prism Editor

A dead simple code editor with syntax highlighting and line numbers. 7kb/gz

Demo

prism-editor.netlify.com

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 ^new
• Support for line numbers ^new
• Support for autosizing the editor ^new
• Autostyling the linenumbers(optional) ^new

Use Case

The goal of this project is to have a simple code editor. You can use to make small changes of some content or you just need a textarea with syntax highlighting. That's what it's good for. If you need an advanced code editor use Codemirror or Monaco Editor.

Install

npm install vue-prism-editor

or

yarn add vue-prism-editor

Usage

Register the component locally and use it (recommended)

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

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

Or register the component globally in main.js

import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/vuePrismEditor.css"; // import the styles
Vue.component("prism-editor", VuePrismEditor);

Browser usage:

<!-- 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>

Options

todo

Dependencies

• prismjs: Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet.
• vue: Reactive, component-oriented view layer for modern web interfaces.

Thanks

inspired by react-live.

License

MIT