NPM version NPM downloads Release Package donate
yarn add vue-prism-component
First you need to load Prism
somewhere in your app:
// yarn add prismjs import 'prismjs' import 'prismjs/themes/prism.css'
OR:
<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" /> <script src="https://unpkg.com/prismjs"></script>
Then In SFC:
<template> <prism language="javascript">{{ code }}</prism> </template> <script> import Prism from 'vue-prism-component' export default { data() { return { code: 'const a = b' } }, components: { Prism } } </script>
Or In JSX:
<Prism language="html">{` <div> <strong>foo</strong> </div> `}</Prism>
For inline rendering, pass the inline
prop:
<Prism inline language="javascript" >alert("foo");</Prism>
You can also set the code using a prop:
import 'prismjs/components/prism-rust' <Prism language="rust" code={ myRustCode } />
- vue-highlight-component: highlight code using highlight.js and vue component.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
vue-prism-component © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @rem_rin_rin