vue-prism-component Highlight Code using Prism.js and Vue Component
yarn add vue-prism-component
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 } />
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
Author: egoist
GitHub: https://github.com/egoist/vue-prism-component
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch