highlight code using prism.js and vue component
Clone or download
Latest commit bfac9ca Oct 24, 2018
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



NPM version NPM downloads CircleCI donate


yarn add vue-prism-component

CDN: UNPKG | jsDelivr


First you need to load Prism somewhere in your app:

// yarn add prismjs
import 'prismjs'
import 'prismjs/themes/prism.css'


<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<script src="https://unpkg.com/prismjs"></script>

Then In SFC:

  <prism language="javascript">{{ code }}</prism>

import Prism from 'vue-prism-component'

export default {
  data() {
    return {
      code: 'const a = b'
  components: {

Or In JSX:

<Prism language="html">{`

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



  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


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