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'

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.

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