# 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 ![prism-editor](https://user-images.githubusercontent.com/342666/89706560-82f65380-d96f-11ea-94f9-e0fbf3220047.gif) 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 ``` > Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work. Or register the component globally ```js import { PrismEditor } from 'vue-prism-editor'; import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles Vue.component('PrismEditor', PrismEditor); ``` Browser usage (for codepen etc.): ```html
``` ## Props | Name | Type | Default | Options | Description | | -------------------- | ------------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | v-model `value` | `string` | `""` | - | Current value of the editor i.e. the code to display | | highlight | `string => string` | - | - | Callback which will receive text to highlight. You'll need to return an HTML string with syntax highlighting using a library such as prismjs. | | readonly | `Boolean` | `false` | - | Readonly | | lineNumbers | `Boolean` | `false` | - | Whether to show line numbers. Default `false` | | autoStyleLineNumbers | `Boolean` | `true` | - | Match line numbers text color to the theme. Default `true` | | tabSize | `number` | `2` | - | The number of characters to insert when pressing tab key. For example, for 4 space indentation, `tabSize` will be `4` and `insertSpaces` will be `true`. Default: `2` | | insertSpaces | `boolean` | `true` | - | Whether to use spaces for indentation. Default: `true`. If you set it to `false`, you might also want to set `tabSize` to `1` | | ignoreTabKey | `boolean` | `false` | - | Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using `Ctrl+Shift+M` (Mac) / `Ctrl+M` manually when this is `false`. Default: `false` | ## Events | Name | Parameters | Description | | ------- | ---------- | ------------------------------------------------------------ | | input | `(code)` | Fires when the code is changed. | | keydown | `(event)` | This event is emitted when a keydown event happens in editor | | keyup | `(event)` | This event is emitted when a keyup event happens in editor | | click | `(event)` | This event is emitted when clicking anywhere in the editor | | focus | `(event)` | This event is emitted when focus | | blur | `(event)` | This event is emitted when blur | ## How it works _This part is taken from [react-simple-code-editor](https://github.com/satya164/react-simple-code-editor)_ It works by overlaying a syntax highlighted `
` block over a `