Vue prism editor

A dead simple code editor with syntax highlighting and line numbers.

Editor works both for Vue 2. Go here for the Vue 3. Several browser based code editors such as Ace, CodeMirror, Monaco etc. 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.

Vue prism editor

.

Go to file. Homepage github. Vue Prism Editor A dead simple code editor with syntax highlighting and line numbers.

.

A dead simple code editor with syntax highlighting and line numbers. Editor works both for Vue 2. Go here for the Vue 3. Several browser based code editors such as Ace, CodeMirror, Monaco etc. 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. You need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with prismjs:. Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.

Vue prism editor

With Vue 3 released, there will be many libraries running into port their vue 2 projects into vue 3. Recently while working on creating a library on vue 3 I needed a syntax highlighter for demo purpose, so thought of writing one with vue 3 Setup API. We would be requiring code that is supposed to be used as a highlighter and the language in which the code would be. Now let's see how can we used the setup function to access props and children. Setup function provides props and setupContext as parameters, we can easily destructure setupContext to access attrs and slots. The above code will be access to props and children's passed to the prismJs. Also, h which was passed to render function but now it has to be imported from vue. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Akhileshpm - Mar 8.

Haikyuu kin test

Default: true. Sep 27, The syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user. Homepage github. Vue Prism Editor A dead simple code editor with syntax highlighting and line numbers. Install npm install vue-prism-editor. Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. For example, it'll look like following with prismjs:. Default: false. You need to use the editor with a third party library which provides syntax highlighting.

Editor works both for Vue 2. Go here for the Vue 3. Several browser based code editors such as Ace, CodeMirror, Monaco etc.

Folders and files Name Name Last commit message. You'll need to return an HTML string with syntax highlighting using a library such as prismjs. For example, for 4 space indentation, tabSize will be 4 and insertSpaces will be true. Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. A dead simple code editor with syntax highlighting and line numbers. Downloads Weekly Downloads 37, Branches Tags. This part is taken from react-simple-code-editor. About A dead simple code editor with syntax highlighting and line numbers. Contributors 8. Editor works both for Vue 2. Try on RunKit. MIT license. The number of characters to insert when pressing tab key.