{"_id":"@dreayoung/vue-code-view","name":"@dreayoung/vue-code-view","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.1":{"name":"@dreayoung/vue-code-view","version":"0.4.1","description":"A Vue 2 component like Vue SFC REPL `@vue/repl` : u can edit, run and preview the code effect display in real time on the web page.","main":"lib/vue-code-viewer.common.js","unpkg":"lib/vue-code-viewer.umd.js","scripts":{"bootstrap":"cnpm i || yarn","dev":"vue-cli-service serve ","dev:play":"vue-cli-service serve --mode play","dist":"vue-cli-service build --mode production --target lib --name vue-code-viewer --dest lib src/index.js","deploy:build":"vue-cli-service build --mode deploy","lint":"vue-cli-service lint","clean":"rimraf node_modules"},"dependencies":{"codemirror":"^5.62.2","deepmerge":"^4.2.2","throttle-debounce":"^3.0.1","tiny-sass-compiler":"^0.12.2"},"peerDependencies":{"vue":"^2.6.11"},"devDependencies":{"@iconify/vue2":"^1.1.3","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-router":"~4.5.0","@vue/cli-plugin-vuex":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/eslint-config-prettier":"^6.0.0","ant-design-vue":"^1.7.8","babel-eslint":"^10.1.0","compression-webpack-plugin":"^6.1.1","core-js":"^3.6.5","element-ui":"^2.15.5","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^6.2.2","highlight.js":"^11.3.1","less":"^4.1.2","markdown-it":"^12.2.0","markdown-it-chain":"^1.3.0","markdown-it-container":"^3.0.0","prettier":"^2.2.1","sass":"^1.44.0","sass-loader":"^8.0.2","uglifyjs-webpack-plugin":"^2.2.0","vue":"^2.6.11","vue-loader":"^15.9.8","vue-router":"^3.2.0","vue-template-compiler":"^2.6.11","vuex":"^3.4.0"},"keywords":["vue","components","codemirror","code editor"],"repository":{"type":"git","url":"git+https://github.com/GendoGay/vue-code-view.git"},"author":{"name":"andurils"},"private":false,"license":"MIT","homepage":"https://andurils.github.io/vue-code-view","browserslist":["last 2 version","> 1%","not dead"],"gitHead":"240440599784e4d6b69b3cbcdbe84bb99fed9044","bugs":{"url":"https://github.com/GendoGay/vue-code-view/issues"},"_id":"@dreayoung/vue-code-view@0.4.1","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-Uu7F4dLXPLPdemus1NStvYSAKhD2sS5n7IL5OGd8PaQEPRcAu9iNGWR6Xq5RyRYsqFWH57c1qz66JslZ5L8drQ==","shasum":"3b04920b01b14f1bf229afad2771af3651969e7f","tarball":"https://registry.npmjs.org/@dreayoung/vue-code-view/-/vue-code-view-0.4.1.tgz","fileCount":15,"unpackedSize":1551750,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1zwGP7BXWPHHLakmc0to2FIWOfj+J4LdpGRz6/yB7bgIgMeVPb/fbLPKK06HEk9QKPcQ7fRqVc8CABly7dYFbyZ8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2iVIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzJQ//XHpluuBZTXjlFC32/Nd6ScUR6F/qXQT9gFsBM2GshgBSbDj3\r\nu8QCbKOjyrZk+JXonYGLtuETtnnWqEFQhDDyWFSRuH+iyjrJLKm/cylVFcaX\r\ndtx4SsvQ3usSyeV+bWCwCUuYmyN11dFMtFy6nvdUmD8QiwzLDIq4mWUvQgZK\r\nbl85ZPvzrSB8p0xR0U9Fo0x2eK3QMKOvnjedKEE+TH/D+qCdv0PsH60rRarz\r\n2JxeF1m1SGUSLcmQBGxlEmWPA+JmgmIEYNGjSUKRE54TrInYmJBke9R4eWXR\r\nXCIXF+C+V0WNuZ7KL1wYgc8kpC2gxzakbYEEZBg76RXSSp7Hh/2a3jqF0oxk\r\nQbTJia/97+GOR2hz5wmn2qtZgemDLPa2i041FfW7wlHMoKKniXyF1crXeyqw\r\nWhvVMAQTHHo/qT8QMo8NS6jCerUgREYW/LhCLMt+sMp5GqIdNzYiFZ33k1ml\r\n1SGe06cOcs5tiLcjYczzh1Hp4WauDJXCEV+pqVwGb5dHMHVP9BTAzdgnpBXe\r\nZ1zLcYP4dGh5gAka9+ewWFYP44pw30+Zc8/PA+gdn00WicvREhhJO22I5q6i\r\nh/txdeeZO5j5/aopdyZsjsp9rTzIC3AymwZrAxgeSpppwn7jXLcWVeM14Ylp\r\n7ct9hmAQYTgq/S5Vr8RYMDu8nsrNMs9m2hg=\r\n=fYgv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dreayoung","email":"1683944353@qq.com"},"directories":{},"maintainers":[{"name":"dreayoung","email":"1683944353@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-code-view_0.4.1_1675240776452_0.24169907733092533"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-01T08:39:36.366Z","0.4.1":"2023-02-01T08:39:36.714Z","modified":"2023-02-01T08:39:36.892Z"},"maintainers":[{"name":"dreayoung","email":"1683944353@qq.com"}],"description":"A Vue 2 component like Vue SFC REPL `@vue/repl` : u can edit, run and preview the code effect display in real time on the web page.","homepage":"https://andurils.github.io/vue-code-view","keywords":["vue","components","codemirror","code editor"],"repository":{"type":"git","url":"git+https://github.com/GendoGay/vue-code-view.git"},"author":{"name":"andurils"},"bugs":{"url":"https://github.com/GendoGay/vue-code-view/issues"},"license":"MIT","readme":"
\n\n[](https://app.travis-ci.com/andurils/vue-code-view)\n[](https://github.com/andurils/vue-code-view/blob/main/LICENSE)\n\n\n\n\nEnglish | [简体中文](./README.zh-CN.md)\n\nA lightweight code interaction component based on `vue 2.x`, which can edit, run and preview the code effect display in real time on the web page.\n\nWhen reading docs that contain a lot of code, many project docs implement a `render` representation of the sample code via the `markdown loader`, but it is static. When we want to debug code, we generally need to open the local IDE or open online editor websites such as `codepen`, `codesandbox`, and it is also subject to whether the computer has a development environment installed or whether the network connection is smooth.\n\nSo can there be such a component that can support editing code in the page, edit, run and preview the code effect display in real time in the web page?\n\nSpecial thanks to the component [react-code-view](https://github.com/simonguo/react-code-view), based on which the vue version of the component was written! Using this component, you can edit the running code and preview the effect in real time by using the multi-sample code in the `vue` page or the `markdown` document.\n\n## Online Demo\n\n![示例][preview-ol-v03] \n\ndemo address: \n\n`codesandbox` example: [vue-code-view-example](https://codesandbox.io/s/vue-code-view-example-forked-nivmw?fontsize=14&hidenavigation=1&theme=dark)\n\n## ✨ Features\n\n- 💻 Code can be edited online and preview the effect in real time.\n- 🎨 Support sample code highlighting, configure themes.\n- 🌈 Support `
![](\"https://iconfont.alicdn.com/t/5602941b-e109-4b22-99c5-21b0b041f234.png\")
\n \n