Awesome Open Source
Awesome Open Source


NPM version NPM downloads Release Package 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="" />
<script src=""></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). · GitHub @egoist · Twitter @rem_rin_rin

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,145
vue (4,052
component (539
highlight (65
prism (20

Find Open Source By Browsing 7,000 Topics Across 59 Categories