# Vue Prism Editor
[![Bundle size (minified + gzip)][bundle-size-badge]][bundle-size]
[![NPM Downloads][downloads-badge]][downloads]
[![Build Status][build-badge]][build]
![Codecov][covarage-badge]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
> A dead simple code editor with syntax highlighting and line numbers. 3kb/z

Editor works both for Vue 2.x and Vue 3.x and you are currently on the branch that supports Vue 2.x.
[Go here for the Vue 3.x compatible version](https://github.com/koca/vue-prism-editor/tree/feature/next)
## Demo
[prism-editor.netlify.com](https://prism-editor.netlify.com/)
## Examples
- Vue Example Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)
- Nuxt Example Codesandbox: [https://codesandbox.io/s/nuxt-vue-prism-editor-62e06](https://codesandbox.io/s/nuxt-vue-prism-editor-62e06)
- Vite Example Codesandbox: [https://codesandbox.io/s/vite-vue-prism-editor-q9j8p](https://codesandbox.io/s/vite-vue-prism-editor-q9j8p)
- Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)
## Features
- Code Editing
- Modular syntax highlighting with third party library (not limited to prismjs)
- Indent line or selected text by pressing tab key, with customizable indentation
- Automatic indent on new lines
- Wrap selected text in parens, brackets, or quotes
- Undo / Redo whole words instead of letter by letter
- Accessible, use Ctrl+Shift+M (Mac) / Ctrl+M to toggle capturing tab key
- Works on mobile (thanks to textarea)
- Auto resize
- Line numbers
- Match line numbers styles to the theme(optional)
## Use Case
Several browser based code editors such as Ace, CodeMirror, Monaco etc. provide the ability to embed a full-featured code editor in your web page. However, if you just need a simple editor with syntax highlighting without any of the extra features, they can be overkill as they don't usually have a small bundle size footprint. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
## Install
```sh
npm install vue-prism-editor
```
or
```sh
yarn add vue-prism-editor
```
## Usage
You need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with prismjs:
Register the component locally and use it (recommended)
```html
` block over a `