@highlighted/vue-js-editor

Js Editor

Simple js 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 ^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-js-editor

or

yarn add vue-js-editor

Usage

Register the component locally and use it (recommended)

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

<script>
import VueJsEditor from 'vue-js-editor'
export default {
  components: {
    JsEditor
  }
}
</script>

Prismjs

This package won't install Prismjs. If you use Prismjs already skip this step. If not you need to load Prismjs somewhere in your app:

// yarn add prismjs
import "prismjs";
import "prismjs/themes/prism.css";

OR:

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

Props

Events

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

Thanks

inspired by react-live.

License

MIT