Awesome Open Source
Awesome Open Source

vue-prism-component

NPM version NPM downloads Release Package 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


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