58ec52afac
Former-commit-id: de9fc7ee6ce7d2874bedb5d51fd2997f52870126 Former-commit-id: 70cb9e2b35ef7a76a62dc085aeb77eb914bc42ab Former-commit-id: 47e9746d0a0fd6d32e798a0f6fbd684c8b555f09
45 lines
779 B
Vue
45 lines
779 B
Vue
<template>
|
|
<pre class="d2-highlight" v-html="highlightHTML"></pre>
|
|
</template>
|
|
|
|
<script>
|
|
// https://highlightjs.org/usage/
|
|
// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
|
|
import highlight from 'highlight.js'
|
|
export default {
|
|
name: 'd2-highlight',
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
required: false,
|
|
default: `console.log('you lost code prop')`
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
highlightHTML: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
this.highlight()
|
|
},
|
|
watch: {
|
|
code () {
|
|
this.highlight()
|
|
}
|
|
},
|
|
methods: {
|
|
highlight () {
|
|
this.highlightHTML = highlight.highlightAuto(this.code).value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.d2-highlight {
|
|
margin: 0px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|