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

koca

vue-prism-editor

- fix: scrolling problem - text won't display past initial height

  "description": "A dead simple code editor with syntax highlighting and line numbers.",

  "homepage": "https://github.com/koca/vue-prism-editor#readme",

    "url": "git+https://github.com/koca/vue-prism-editor.git"

    "url": "https://github.com/koca/vue-prism-editor/issues"

  "unpkg": "dist/prismeditor.umd.production.min.js",

  "umd:main": "dist/prismeditor.umd.production.min.js",

    "dev": "tsdx watch --format cjs --name PrismEditor",

    "build": "tsdx build --format cjs,esm,umd --name PrismEditor",

    "test:watch": "tsdx test --watchAll",

    "test:cov": "tsdx test --collectCoverage",

    "@testing-library/jest-dom": "^5.10.1",

    "@vue/cli-plugin-unit-jest": "^4.4.4",

    "jest-environment-jsdom-sixteen": "^1.0.3",

[![Bundle size (minified + gzip)][bundle-size-badge]][bundle-size]

[![NPM Downloads][downloads-badge]][downloads]

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

[prism-editor.netlify.com](https://prism-editor.netlify.com/)

- Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)

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

- Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)

- Modular syntax highlighting with third party library (not limited to prismjs)

- Indent line or selected text by pressing tab key, with customizable indentation

- 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

- Match line numbers styles to the theme(optional)

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.

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)

  <prism-editor class="my-editor" v-model="code" :highlight="highlighter" line-numbers></prism-editor>

  import { PrismEditor } from 'vue-prism-editor';

  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

  // import highlighting library (you can use any library you want just return html string)

  import { highlight, languages } from 'prismjs/components/prism-core';

  import 'prismjs/components/prism-clike';

  import 'prismjs/components/prism-javascript';

  import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles

    data: () => ({ code: 'console.log("Hello World")' }),

        return highlight(code, languages.js); //returns html

    // we dont use `language-` classes anymore so thats why we need to add background and text color manually

    // you must provide font-family font-size line-height. Example:

    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;

  // optional class for removing the outline

> Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.

import { PrismEditor } from 'vue-prism-editor';

import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles

Vue.component('PrismEditor', PrismEditor);

[package]: https://www.npmjs.com/package/vue-prism-editor

[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/vue-prism-editor.svg?style=flat-square

[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/vue-prism-editor@1.x.x.svg?style=flat-square

[bundle-size]: https://bundlephobia.com/result?p=vue-prism-editor

[covarage-badge]: https://img.shields.io/codecov/c/github/koca/vue-prism-editor?style=flat-square

		# vue-prism-editor

		## 1.1.0

		### Minor Changes

		- fix: scrolling problem - text won't display past initial height

		## 1.0.1
		@@ -4,0 +10,0 @@

		{
		"name": "vue-prism-editor",
		"version": "1.0.1",
		"version": "1.1.0",
		"description": "A dead simple code editor with syntax highlighting and line numbers.",
		@@ -5,0 +5,0 @@ "author": {

New alerts

Improved metrics

Worsened metrics

		@@ -12,2 +12,5 @@ # Vue Prism Editor

		![prism-editor](https://user-images.githubusercontent.com/342666/89706560-82f65380-d96f-11ea-94f9-e0fbf3220047.gif)


		## Demo
		@@ -19,3 +22,4 @@

		- Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)
		- 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)
		- Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)
		@@ -197,4 +201,4 @@
		[package]: https://www.npmjs.com/package/vue-prism-editor
		[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/vue-prism-editor.svg?style=flat-square
		[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/vue-prism-editor@1.x.x.svg?style=flat-square
		[bundle-size]: https://bundlephobia.com/result?p=vue-prism-editor
		[covarage-badge]: https://img.shields.io/codecov/c/github/koca/vue-prism-editor?style=flat-square