Another Prism.js component for Vue.js. This component will dynamically register un-registered languages and plugins when specified. It also provides a middleware hook for setting up plugins. This component has only been tested in a webpack setting.
<template>
<div>
<prism language="bash" :plugins="['command-line']", :code="code"></prism>
</div>
</template>
<script>
import Prism from 'vue-prismjs'
import 'prismjs/themes/prism.css'
export default {
components: {
Prism
},
data () {
code: 'npm install vue-prismjs --save'
}
}
</script>
<template>
<div>
<prism language="markup">
<h1>Foo</h1>
</prism>
</div>
</template>
<script>
import Prism from 'vue-prismjs'
import 'prismjs/themes/prism.css'
export default {
components: {
Prism
}
}
</script>
language
{String} - language component to use. Defaults tojavascript
plugins
{Array} - array of plugin names. Optionalcode
{String} - code string. Required (previous version allowed slot, this has been deprecated).use
{Function} - a middleware function that allows you to interact with Prism and the vm before the code is rendered. The function has a signature offunction (Prism, vm) {}
. Optionalpre-render
{Function} - Processes the code before rendering. The function has a signature offunction (code, vm) {}
and the output is used as the code text. By default this applies the following code to removedata-v-*
from the codecode.replace(/\s+data-v-\S+="[^"]*"/g, '')
Usage of the code slot has been deprecated. You must now use the code property. This was due to issues with markup in slots having extra properties added by vue itself.- Slots are back by popular demand. A pre-render function option is not available to filter out unwanted data added by vue.