{"id":20594637,"url":"https://github.com/koca/vue-prism-editor","last_synced_at":"2025-05-14T22:09:21.937Z","repository":{"id":43933030,"uuid":"146226118","full_name":"koca/vue-prism-editor","owner":"koca","description":" A dead simple code editor with syntax highlighting and line numbers. 3kb/gz","archived":false,"fork":false,"pushed_at":"2023-12-07T18:15:29.000Z","size":1781,"stargazers_count":760,"open_issues_count":25,"forks_count":85,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-20T20:36:05.136Z","etag":null,"topics":["component","editor","prismjs","pwa","vue"],"latest_commit_sha":null,"homepage":"https://prism-editor.netlify.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-27T00:05:40.000Z","updated_at":"2025-04-10T00:55:09.000Z","dependencies_parsed_at":"2024-06-18T12:18:36.536Z","dependency_job_id":"63c89d25-5cc8-4fee-a54b-2e020893c124","html_url":"https://github.com/koca/vue-prism-editor","commit_stats":{"total_commits":99,"total_committers":8,"mean_commits":12.375,"dds":0.101010101010101,"last_synced_commit":"4fe7c0ca993b4dccc2c55cd1d0d571641f360085"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-prism-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-prism-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-prism-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-prism-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koca","download_url":"https://codeload.github.com/koca/vue-prism-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251127495,"owners_count":21540303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","editor","prismjs","pwa","vue"],"created_at":"2024-11-16T08:09:39.116Z","updated_at":"2025-05-14T22:09:16.925Z","avatar_url":"https://github.com/koca.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Vue Prism Editor\n\n[![Bundle size (minified + gzip)][bundle-size-badge]][bundle-size]\n[![NPM Downloads][downloads-badge]][downloads]\n[![Build Status][build-badge]][build]\n![Codecov][covarage-badge]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n\u003e A dead simple code editor with syntax highlighting and line numbers. 3kb/z\n\n![prism-editor](https://user-images.githubusercontent.com/342666/89706560-82f65380-d96f-11ea-94f9-e0fbf3220047.gif)\n\nEditor works both for Vue 2.x and Vue 3.x and you are currently on the branch that supports Vue 2.x.\n[Go here for the Vue 3.x compatible version](https://github.com/koca/vue-prism-editor/tree/feature/next)\n\n## Demo\n\n[prism-editor.netlify.com](https://prism-editor.netlify.com/)\n\n## Examples\n\n- Vue Example Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)\n- Nuxt Example Codesandbox: [https://codesandbox.io/s/nuxt-vue-prism-editor-62e06](https://codesandbox.io/s/nuxt-vue-prism-editor-62e06)\n- Vite Example Codesandbox: [https://codesandbox.io/s/vite-vue-prism-editor-q9j8p](https://codesandbox.io/s/vite-vue-prism-editor-q9j8p)\n- Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)\n\n## Features\n\n- Code Editing\n- Modular syntax highlighting with third party library (not limited to prismjs)\n- Indent line or selected text by pressing tab key, with customizable indentation\n- Automatic indent on new lines\n- Wrap selected text in parens, brackets, or quotes\n- Undo / Redo whole words instead of letter by letter\n- Accessible, use Ctrl+Shift+M (Mac) / Ctrl+M to toggle capturing tab key\n- Works on mobile (thanks to textarea)\n- Auto resize\n- Line numbers\n- Match line numbers styles to the theme(optional)\n\n## Use Case\n\nSeveral 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.\n\n## Install\n\n```sh\nnpm install vue-prism-editor\n```\n\nor\n\n```sh\nyarn add vue-prism-editor\n```\n\n## Usage\n\nYou need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with prismjs:\n\nRegister the component locally and use it (recommended)\n\n```html\n\u003ctemplate\u003e\n  \u003cprism-editor class=\"my-editor\" v-model=\"code\" :highlight=\"highlighter\" line-numbers\u003e\u003c/prism-editor\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // import Prism Editor\n  import { PrismEditor } from 'vue-prism-editor';\n  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere\n\n  // import highlighting library (you can use any library you want just return html string)\n  import { highlight, languages } from 'prismjs/components/prism-core';\n  import 'prismjs/components/prism-clike';\n  import 'prismjs/components/prism-javascript';\n  import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles\n\n  export default {\n    components: {\n      PrismEditor,\n    },\n    data: () =\u003e ({ code: 'console.log(\"Hello World\")' }),\n    methods: {\n      highlighter(code) {\n        return highlight(code, languages.js); // languages.\u003cinsert language\u003e to return html with markup\n      },\n    },\n  };\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  /* required class */\n  .my-editor {\n    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */\n    background: #2d2d2d;\n    color: #ccc;\n\n    /* you must provide font-family font-size line-height. Example: */\n    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;\n    font-size: 14px;\n    line-height: 1.5;\n    padding: 5px;\n  }\n\n  /* optional class for removing the outline */\n  .prism-editor__textarea:focus {\n    outline: none;\n  }\n\u003c/style\u003e\n```\n\n\u003e Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.\n\nOr register the component globally\n\n```js\nimport { PrismEditor } from 'vue-prism-editor';\nimport 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles\nVue.component('PrismEditor', PrismEditor);\n```\n\nBrowser usage (for codepen etc.):\n\n```html\n\u003cscript src=\"https://unpkg.com/vue@2.6.*\"\u003e\u003c/script\u003e\n\n\u003c!-- Prism Editor --\u003e\n\u003cscript src=\"https://unpkg.com/vue-prism-editor\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css\" /\u003e\n\n\u003c!-- custom highlighter: --\u003e\n\u003cscript src=\"https://unpkg.com/prismjs/prism.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/prismjs/themes/prism-tomorrow.css\" /\u003e\n\n\u003cstyle\u003e\n  .height-200{\n    height: 200px  \n  }\n  \n  .my-editor {\n    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */\n    background: #2d2d2d;\n    color: #ccc;\n\n    /* you must provide font-family font-size line-height. Example:*/\n    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;\n    font-size: 14px;\n    line-height: 1.5;\n    padding: 5px;\n  }\n\n  /* optional class for removing the outline */\n  .prism-editor__textarea:focus {\n    outline: none;\n  }\n\u003c/style\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003cprism-editor class=\"my-editor height-200\" v-model=\"code\" :highlight=\"highlighter\" line-numbers\u003e\u003c/prism-editor\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  new Vue({\n    el: \"#app\",\n    data: () =\u003e ({\n      code: \"console.log('hello world')\"\n    }),\n    methods: {\n      highlighter(code) {\n        // js highlight example\n        return Prism.highlight(code, Prism.languages.js, \"js\");\n      }\n    },\n  })\n\u003c/script\u003e\n```\n\n## Props\n\n| Name                 | Type               | Default | Options | Description                                                                                                                                                  |\n| -------------------- | ------------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| v-model `value`      | `string`           | `\"\"`    | -       | Current value of the editor i.e. the code to display                                                                                                         |\n| highlight            | `string =\u003e 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.                |\n| readonly             | `Boolean`          | `false` | -       | Readonly                                                                                                                                                     |\n| lineNumbers          | `Boolean`          | `false` | -       | Whether to show line numbers. Default `false`                                                                                                                                |\n| autoStyleLineNumbers | `Boolean`          | `true`  | -       | Match line numbers text color to the theme. Default `true`                                                                                                                  |\n| 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` |\n| 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` |\n| 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` |\n\n## Events\n\n| Name    | Parameters | Description                                                  |\n| ------- | ---------- | ------------------------------------------------------------ |\n| input   | `(code)`   | Fires when the code is changed.                              |\n| keydown | `(event)`  | This event is emitted when a keydown event happens in editor |\n| keyup   | `(event)`  | This event is emitted when a keyup event happens in editor   |\n| click   | `(event)`  | This event is emitted when clicking anywhere in the editor   |\n| focus   | `(event)`  | This event is emitted when focus                             |\n| blur    | `(event)`  | This event is emitted when blur                              |\n\n## How it works\n\n_This part is taken from [react-simple-code-editor](https://github.com/satya164/react-simple-code-editor)_\n\nIt works by overlaying a syntax highlighted `\u003cpre\u003e` block over a `\u003ctextarea\u003e`. When you type, select, copy text etc., you interact with the underlying `\u003ctextarea\u003e`, so the experience feels native. This is a very simple approach compared to other editors which re-implement the behaviour.\n\nThe syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user.\n\nThe vanilla `\u003ctextarea\u003e` doesn't support inserting tab characters for indentation, so we re-implement it by listening to `keydown` events and programmatically updating the text. One caveat with programmatically updating the text is that we lose the undo stack, so we need to maintain our own undo stack. As a result, we can also implement improved undo behaviour such as undoing whole words similar to editors like VSCode.\n\n## Limitations\n\nDue to the way it works, it has certain limitations:\n\n- The syntax highlighted code cannot have different font family, font weight, font style, line height etc. for its content. Since the editor works by aligning the highlighted code over a `\u003ctextarea\u003e`, changing anything that affects the layout can misalign it.\n- The custom undo stack is incompatible with undo/redo items browser's context menu. However, other full featured editors don't support browser's undo/redo menu items either.\n- The editor is not optimized for performance and large documents can affect the typing speed.\n- We hide text in the textarea using `-webkit-text-fill-color: transparent`, which works in all modern browsers (even non-webkit ones such as Firefox and Edge). On IE 10+, we use `color: transparent` which doesn't hide the cursor. Text may appear bolder in unsupported browsers.\n\n## Thanks\n\n[react-simple-code-editor](https://github.com/satya164/react-simple-code-editor)\n\n## License\n\nMIT\n\n[build-badge]: https://img.shields.io/circleci/project/github/koca/vue-prism-editor/master.svg?style=flat-square\n[build]: https://circleci.com/gh/koca/vue-prism-editor\n[downloads-badge]: https://img.shields.io/npm/dt/vue-prism-editor.svg?style=flat-square\n[downloads]: https://npmjs.com/package/vue-prism-editor\n[build-badge]: https://img.shields.io/npm/dm/vue-client-only.svg?style=flat\n[license-badge]: https://img.shields.io/npm/l/vue-prism-editor.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[version-badge]: https://img.shields.io/npm/v/vue-prism-editor.svg?style=flat-square\n[package]: https://www.npmjs.com/package/vue-prism-editor\n[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/vue-prism-editor@1.x.x.svg?style=flat-square\n[bundle-size]: https://bundlephobia.com/result?p=vue-prism-editor\n[covarage-badge]: https://img.shields.io/codecov/c/github/koca/vue-prism-editor?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoca%2Fvue-prism-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoca%2Fvue-prism-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoca%2Fvue-prism-editor/lists"}