highlight code using prism.js and vue component
Clone or download
Latest commit bfac9ca Oct 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example init Jun 30, 2017
src format Oct 24, 2018
.editorconfig init Jun 30, 2017
.gitattributes init Jun 30, 2017
.gitignore init Jun 30, 2017
.prettierrc Add support for inline rendering (#5) Oct 17, 2018
LICENSE init Jun 30, 2017
README.md Add support for inline rendering (#5) Oct 17, 2018
circle.yml init Jun 30, 2017
package.json Release v1.1.1 Oct 24, 2018
yarn.lock update lockfile Oct 17, 2018

README.md

vue-prism-component

NPM version NPM downloads CircleCI donate

Install

yarn add vue-prism-component

CDN: UNPKG | jsDelivr

Usage

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 } />

Related

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

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