9e8a9fa336
Former-commit-id: 474a7f85f000818c4476749358ed23bce510c486 [formerly 474a7f85f000818c4476749358ed23bce510c486 [formerly 474a7f85f000818c4476749358ed23bce510c486 [formerly 474a7f85f000818c4476749358ed23bce510c486 [formerly a2a16dba80a4df41e3b73b9699909ec07a342a63 [formerly 8a98f227c3d4360e2845b61fc6f26b64ab755d28]]]]] Former-commit-id: 71291296093c5d4c3db05851c18a6698aa1c3645 Former-commit-id: 8e33c11261d76f8c2a7d0400eb5dafe732885479 Former-commit-id: 10c4883814f552e3feb14f3d2fcb7abf972d7a9d [formerly 9ee51cca396c744c534813d1dcc82114ed8d2ebf] Former-commit-id: 37ec1d8735b4f14306535702e719211d5583223c Former-commit-id: 5afbb2d7ed07912e03e0282d72d0b613005639d0 Former-commit-id: 44db664bfe868d691c612c4c9b11285e6c36dec1 Former-commit-id: e89b1ff374aff4d54dd74185dc948505621e13a0 Former-commit-id: e7df5c58193b23b2d7e95a269816e589c22bad79
66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
|
<pre class="d2-highlight hljs" v-html="highlightHTML"></pre>
|
|
</template>
|
|
|
|
<script>
|
|
// https://highlightjs.org/usage/
|
|
// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
|
|
import './styles/github-gist.css'
|
|
import htmlFormat from './libs/htmlFormat'
|
|
import highlight from 'highlight.js'
|
|
export default {
|
|
name: 'd2-highlight',
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
formatHtml: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
lang: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
highlightHTML: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
this.highlight()
|
|
},
|
|
watch: {
|
|
code () {
|
|
this.highlight()
|
|
}
|
|
},
|
|
methods: {
|
|
highlight () {
|
|
const code = this.formatHtml ? htmlFormat(this.code) : this.code
|
|
this.highlightHTML = highlight.highlightAuto(code, [
|
|
this.lang,
|
|
'html',
|
|
'javascript',
|
|
'json',
|
|
'css',
|
|
'scss',
|
|
'less'
|
|
]).value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.d2-highlight {
|
|
margin: 0px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|