{"_id":"@dans98/vue-prism-editor","_rev":"1-99421168050691dde1252a9a429cb3e8","name":"@dans98/vue-prism-editor","dist-tags":{"latest":"0.5.2"},"versions":{"0.5.2":{"name":"@dans98/vue-prism-editor","version":"0.5.2","scripts":{"serve":"vue-cli-service serve","build:site":"vue-cli-service build --dest site","lint":"vue-cli-service lint","build":"vue-cli-service build --target lib --name VuePrismEditor ./src/components/Editor.vue && rimraf dist/demo.html","test:unit":"vue-cli-service test:unit","test:unit:cov":"npm run lint && npm run test:unit -- --coverage","publish-pkg":"npm run build && npm publish"},"dependencies":{"dom-iterator":"^1.0.0","escape-html":"^1.0.3","unescape":"^1.0.1"},"devDependencies":{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-plugin-unit-jest":"^3.6.3","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.29","babel-core":"7.0.0-bridge.0","babel-jest":"^24.7.1","lint-staged":"^8.1.5","prismjs":"^1.15.0","rimraf":"^2.6.3","tailwindcss":"^0.6.5","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"unpkg":"dist/VuePrismEditor.umd.min.js","module":"dist/VuePrismEditor.common.js","main":"dist/VuePrismEditor.umd.js","repository":{"type":"git","url":"git+https://github.com/koca/vue-prism-editor.git"},"bugs":{"url":"https://github.com/koca/vue-prism-editor/issues"},"homepage":"https://github.com/koca/vue-prism-editor#readme","license":"MIT","keywords":["vue","editor","code editor","prism"],"description":"A dead simple code editor with syntax highlighting and line numbers.","author":{"name":"Mesut Koca","email":"imesutkoca@gmail.com"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"linters":{"*.js":["vue-cli-service lint","git add"],"*.vue":["vue-cli-service lint","git add"]},"ignore":["dist/*"]},"gitHead":"24963c83566a8ef5af93fd2e7273f622fef31926","_id":"@dans98/vue-prism-editor@0.5.2","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-BWx6LHp6xtW42pE1A4VDH3hF77QralBzRrqeVwq72cuZ7a/4B1JbxI1FZ3a3FB8GK2daWVjmYO6F187bv+hOiQ==","shasum":"c3416ca2e278b2563a38bc0a30606cb536fea00c","tarball":"https://registry.npmjs.org/@dans98/vue-prism-editor/-/vue-prism-editor-0.5.2.tgz","fileCount":33,"unpackedSize":681291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYE80CRA9TVsSAnZWagAAhYoP/1nhnHpmCTfaFcoNGXod\n1kRK21O2LRPdlDIhffQu74iAVcKCTby0a5iLTLAehEtFH+iBcQWwkHnueaPU\nLX8xhX1B7HCJRcxcm9WR5AhKxqu1YQv6pzWORx2fPu8uqwNOunO76EqksrQ1\nhIXQZ4piCmKMbc4oNTM+HnzM9Q84ynf6H+uV7y5/WHgEzmuGu6KrKHF8i/gm\neNbwr8QYXYfvRZTf28ttwP2yXlofD2hLh0KhIfnwR8o4YwfZOAdFXIuk8z0N\nm7b/uMSD3X0+/I2zFWnqkXKmjZphgsiKWtDknXtMgyC6n1kFn8A+Q/lbjbBI\n2NNuW3pmbYtsRnCTmIlxp4jizpntRrCTKO8ID7Wxk2zuP93gswD5gY7vStio\nxkuh8vScFxofdNxQ4928Tp0CBAnqZv9bZe1Gl0OJowuUlp3GCylKmAwVfjX/\n5YqhjyQMZ5LykAypae2LUy6pFdRQaiSPtiyWFlNw/8tO/HCvfy8dZeJPXvcd\nIGgOajnSvHfuT0Shi3Jg1QZrVIsvFvCbukxjn5cgbOBzEDOrRcJXFl4TuZ7/\nbVixetG0fRKMWuCLZgsIFLcEhPMECrVAZGwdvvZBAMvCAkRolr+/GDohkpc7\nV0tlBMftbfUjLAk+e3Sa7KufpHGs+CIbYVPFg1aajfYdCTVqf7P3L/AzNGIa\nJ15V\r\n=dQBg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSFO7v8+JXm5WCizfrIzQ8sORGWYMVUWIhYmmef3eEowIgF2w6pnX3gRBNGN0Igy20gQGSHw1TzSy2R1dT1ASDJwY="}]},"maintainers":[{"name":"dans98","email":"me@danielshields.uk"}],"_npmUser":{"name":"dans98","email":"me@danielshields.uk"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-prism-editor_0.5.2_1583370036050_0.9533318472759793"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-05T01:00:35.810Z","0.5.2":"2020-03-05T01:00:36.196Z","modified":"2022-04-05T02:42:32.061Z"},"maintainers":[{"name":"dans98","email":"me@danielshields.uk"}],"description":"A dead simple code editor with syntax highlighting and line numbers.","homepage":"https://github.com/koca/vue-prism-editor#readme","keywords":["vue","editor","code editor","prism"],"repository":{"type":"git","url":"git+https://github.com/koca/vue-prism-editor.git"},"author":{"name":"Mesut Koca","email":"imesutkoca@gmail.com"},"bugs":{"url":"https://github.com/koca/vue-prism-editor/issues"},"license":"MIT","readme":"# Vue Prism Editor\n\n<p align=\"center\">\n\n\n![version](https://img.shields.io/npm/v/vue-prism-editor.svg)\n![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/vue-prism-editor.svg)\n[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/koca/vue-prism-editor)\n[![CircleCI branch](https://circleci.com/gh/koca/vue-prism-editor/tree/master.svg?style=shield)](https://circleci.com/gh/koca/vue-prism-editor/tree/master)\n<!-- ![Codecov](https://img.shields.io/codecov/c/github/koca/vue-prism-editor.svg) -->\n\n</p>\n\n> A dead simple code editor with syntax highlighting and line numbers. 7kb/gz\n\n## Demo\n\n[prism-editor.netlify.com](https://prism-editor.netlify.com/)\n\n## Examples\n  \n * Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)\n * Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)\n\n## Features\n\n- Code Editing ^^\n- Syntax highlighting\n- Undo / Redo\n- Copy / Paste\n- The spaces/tabs of the previous line is preserved when a new line is added\n- Works on mobile (thanks to contenteditable)\n- Resize to parent width and height <sup>new</sup>\n- Support for line numbers <sup>new</sup>\n- Support for autosizing the editor <sup>new</sup>\n- Autostyling the linenumbers(optional) <sup>new</sup>\n\n## Use Case\n\nThe goal of this project is to have a simple code editor. You can use to make small changes of some content or you just need a textarea with syntax highlighting. That's what it's good for. If you need an advanced code editor use Codemirror or Monaco Editor.\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\nRegister the component locally and use it (recommended)\n\n```html\n<template>\n  <prism-editor :code=\"code\" language=\"js\"></prism-editor>\n</template>\n\n<script>\nimport PrismEditor from 'vue-prism-editor'\nexport default {\n  components: {\n    PrismEditor\n  }\n}\n</script>\n```\n\nOr register the component globally in `main.js`\n\n```js\nimport VuePrismEditor from \"vue-prism-editor\";\nimport \"vue-prism-editor/dist/VuePrismEditor.css\"; // import the styles\nVue.component(\"prism-editor\", VuePrismEditor);\n```\n\nBrowser usage:\n\n```html\n<!-- vue-prism-editor JavaScript -->\n<script src=\"https://unpkg.com/vue-prism-editor\"></script>\n\n<!-- vue-prism-editor CSS -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css\">\n\n<!-- use -->\n<script>\nVue.component('vue-prism-editor', VuePrismEditor)\nnew Vue({\n    el: '#app'\n})\n</script>\n```\n\n## Prismjs\n\nThis package won't install Prismjs. If you use Prismjs already skip this step. If not you need to load Prismjs somewhere in your app:\n\n```js\n// yarn add prismjs\nimport \"prismjs\";\nimport \"prismjs/themes/prism.css\";\n```\n\nOR:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/prismjs/themes/prism.css\" />\n<script src=\"https://unpkg.com/prismjs\"></script>\n```\n\n## Props\n\n| Name                 | Type      | Default | Options                              | Description                                           |\n| -------------------- | --------- | ------- | ------------------------------------ | ----------------------------------------------------- |\n| v-model              | `string`  | -       | -                                    | for the `code` prop below                             |\n| code                 | `string`  | `\"\"`    | -                                    | the code                                              |\n| language             | `String`  | `\"js\"`  | `vue,html,md,ts` + Prismjs Languages | language of the code                                  |\n| lineNumbers          | `Boolean` | `false` | -                                    | Whether to show line numbers or not                   |\n| readonly             | `Boolean` | `false` | -                                    | Indicates if the editor is read only or not.          |\n| emitEvents           | `Boolean` | `false` | -                                    | Indicates if the editor should emit events.           |\n| autoStyleLineNumbers | `Boolean` | `true`  | -                                    | Allow the line number to be styled by this component. |\n\n## Events\n\n| Name   | Parameters | Description                     |\n| ------ | ---------- | ------------------------------- |\n| change | `(code)`   | Fires when the code is changed. |\n\nThe events below won't be fired unless you set the `emitEvents` prop to `true`.\n\n| Name         | Parameters | Description                                                                 |\n| ------------ | ---------- | --------------------------------------------------------------------------- |\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| editor-click | `(event)`  | This event is emitted  when clicking anywhere in the contenteditable editor |\n\n## Thanks\n\ninspired by [react-live](https://github.com/FormidableLabs/react-live).\n\n## License\n\nMIT\n","readmeFilename":"README.md"}