{"_id":"@bigin/vue-code-highlight","_rev":"10-66943110e5f84e75457331538ca82666","name":"@bigin/vue-code-highlight","dist-tags":{"latest":"0.7.7"},"versions":{"0.7.7":{"name":"@bigin/vue-code-highlight","version":"0.7.7","keywords":["Vue","Code highlight","Prism"],"author":{"name":"Jan Bílek"},"license":"MIT","_id":"@bigin/vue-code-highlight@0.7.7","maintainers":[{"name":"tammai.bigin","email":"tam.mai@bigin.vn"},{"name":"trinhnguyen1103","email":"trinh.nguyen@bigin.vn"}],"homepage":"https://github.com/elisiondesign/vue-code-highlight#readme","bugs":{"url":"https://github.com/elisiondesign/vue-code-highlight/issues"},"url":"https://elision.design/","dist":{"shasum":"b6a406fb3fe0238a09977b462beb7d1606b2a0ff","tarball":"https://registry.npmjs.org/@bigin/vue-code-highlight/-/vue-code-highlight-0.7.7.tgz","fileCount":40,"integrity":"sha512-xBiQlxV+UEBcYS2qTWhheDncDDYFaminizdtRJQeiDUoR1FRzGjvAQPIElBnKs3Ybe6JYFe2fMNggpmmGp2ZEw==","signatures":[{"sig":"MEQCIB7JL6I6mAL6cIsQGDHqX9+bzVrQjcerGO7Xa9F85+maAiBTPDEmHs8jaGvJw/gs+VvGzvKC2BiLfCo7ZgWAZQ6Q0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":856406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJLFBCRA9TVsSAnZWagAAG8kP/30Y2IRAkUHfenAzL2MY\noH5i2LObpu+NdyTR1uKwAkQf4HuAP4nYAMtPL2ScOXYfkvWI9FEDCoSrCEaR\nCIguYrRMFNfcXR7u9hTuVQdkQjqAO+DnsI9wWxp4r7gY6XYZTd51QX3CN61E\nOBPKTmn4RDLQF+QhM4GBJ4HZfvu2rlMn6DKR/sd4R8vgdPuh9xqYP4vgfr0n\nTqqh84Y+zpDlVkmOpqTv1G+sVS25k1V1KGkNB20Dzq1DHPGCmeniLRXcJU9+\nN6VRirFtF3LwWzILq8JaqUlhtOSr7m3bucGTntPn19ZUMFnueHtCtaXejIhp\nJUo64kdPHzyDdw9BJBaW0vk/rMJxwDbUqT3+JgO6oKYlfAinSW8PCed1/Tsl\nzNkpNYklDXW5JPnArOiK8x+nyu/Bbfkk2eeGKMypVhLV7Pgxv2uvushWuKKv\nacWsD3D9hMMhY/ujqfdki/T58Qu8tXNyLFe47D+LJT+iK2fjhnjA+dTrgq4w\nR2dIoaHBAeTWbY/0jyaeQmNfRLUgUjw8pH4YxCd63CzhDkM7aBxbutxVkz2Q\nM0dpraM48sAOXbxUAT48fxVpNwD0bb45CTex5cWWnHc6mE+1WeGuYOFxn85q\nLNzlOB2MuNeayI315U9R1Oh5yEkLeNqKjhH09HpQdVV/Qc7MRYIxIeQbcexk\n88WE\r\n=Wxak\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-code-highlight.umd.js","email":"honza@elision.design","unpkg":"dist/vue-code-highlight.min.js","module":"dist/vue-code-highlight.esm.js","browser":{"./sfc":"src/CodeHighlight.vue"},"gitHead":"6506848416244370391028d0c482105679bfed78","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","build":"vue-cli-service build --dest demo && npm run build-bundle","start":"vue-cli-service serve","deploy":"git subtree push --prefix demo origin gh-pages","build:es":"rollup --config rollup.config.js --format es --file dist/vue-code-highlight.esm.js","build:umd":"rollup --config rollup.config.js --format umd --file dist/vue-code-highlight.umd.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-code-highlight.min.js","build-bundle":"npm run build:umd & npm run build:es & npm run build:unpkg"},"_npmUser":{"name":"tammai.bigin","email":"tam.mai@bigin.vn"},"repository":{"url":"git+https://github.com/elisiondesign/vue-code-highlight.git","type":"git"},"_npmVersion":"6.14.8","description":"> Beautiful code syntax highlighting as Vue.js component.","directories":{},"_nodeVersion":"12.18.4","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.16","prism-es6":"^1.2.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"}},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^0.57.1","@vue/cli-service":"^3.0.0-rc.5","rollup-plugin-vue":"^5.0.0","rollup-plugin-buble":"^0.19.2","eslint-plugin-import":"^2.13.0","@vue/cli-plugin-babel":"^3.0.0-rc.5","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.0-rc.5","eslint-config-airbnb-base":"^13.0.0","rollup-plugin-node-resolve":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-code-highlight_0.7.7_1613017408912_0.23406266870810644","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-02-11T04:23:28.704Z","modified":"2026-01-07T04:08:46.542Z","0.7.7":"2021-02-11T04:23:29.098Z"},"bugs":{"url":"https://github.com/elisiondesign/vue-code-highlight/issues"},"author":{"name":"Jan Bílek"},"license":"MIT","homepage":"https://github.com/elisiondesign/vue-code-highlight#readme","keywords":["Vue","Code highlight","Prism"],"repository":{"url":"git+https://github.com/elisiondesign/vue-code-highlight.git","type":"git"},"description":"> Beautiful code syntax highlighting as Vue.js component.","maintainers":[{"email":"trinh.nguyen@bigin.vn","name":"trinhnguyen1103"},{"email":"vy.trinh@bigin.vn","name":"vytrinh-bg"},{"email":"duyen.tran@bigin.vn","name":"duynhuyn"}],"readme":"# vue-code-highlight\n\n> Beautiful code syntax highlighting as Vue.js component.\n\n## Examples\nhttps://codesandbox.io/s/vue-code-highlight-example-63h5m\n![screenshot](/public/screenshot2.png)\n\n## Usage\n\n```\nnpm install vue-code-highlight --save\n```\n\nNow, you can use this module in two diferrent ways, as a component or as a directive.\n\n### Component\nIn any component:\n\n```js\n// You have to extract the component from the module\nimport { component as VueCodeHighlight } from 'vue-code-highlight';\n\ncomponents:{\n VueCodeHighlight,\n ...\n}\n```\n\n```html\n\n 
\n //Paste your code here\n
\n\n```\n**Props**\n|Prop |Description\n|:--------------|:------------------------------------------|\n| **language** | Pass language name you want to highlight. Options: https://prismjs.com/#supported-languages |\n\nYour content will be highlighted dynamically when it updates. \n\nThe `
` tag is required to preserve newline characters (They're stripped by default in Vue).\n\nWindow styles are already present in a component mode, but you will need to select and include a theme to properly highlight your code. (See the themes section.)\n\n### Directive\nIn your main file:\n```js\nimport VueCodeHighlight from 'vue-code-highlight';\n\nVue.use(VueCodeHighlight) //registers the v-highlight directive\n\n```\nAnd then in any Vue component:\n\n```html\n
\n ...\n
\n```\nAll markup under the div element having the following structure will be syntax highlighted.\n\n```html\n
\n  \n    //your code goes here\n  \n
\n```\n\nTo give the highlighter a window look in a directive mode, also don't forget to include the `./node_modules/vue-code-highlight/themes/window.css` file somewhere in your app.\n\n## Themes\nIn order to visually higlight your code, you need to select a theme from `./node_modules/vue-code-highlight/themes/` and import it somewhere into your component/application. These are just regular prism themes, so feel free to improvise.\n\n![themes](/public/themes.png)\n\n## Other languages\n\nAny of the [supported languages](https://prismjs.com/index.html#supported-languages) in Prism may be used. To enable support\nfor them, you must import them explicitly as well as Prism's markup templating.\n\nFor example, to include PHP highlighting in your application:\n\n```jsx\nimport 'prism-es6/components/prism-markup-templating';\nimport 'prism-es6/components/prism-php';\n```\n","readmeFilename":"README.md"}