617127f8bc
Former-commit-id: d3f6a2c1709b0ef2b46ab629db382b4687074692 [formerly d3f6a2c1709b0ef2b46ab629db382b4687074692 [formerly d3f6a2c1709b0ef2b46ab629db382b4687074692 [formerly d3f6a2c1709b0ef2b46ab629db382b4687074692 [formerly 2cb8a3245f269e8fc8b8e84e75582dbe2111ef6e [formerly 2fcb318c9d67fd23d117fc43c58ce3bd0fe3276e]]]]] Former-commit-id: 986b67d62d3c86fc484836203f8b5e1f4891eb6c Former-commit-id: cf0546bc2376ab54f182e127f67c3a40393ff34b Former-commit-id: 6963b119eb71b3d607c92c9cad99d050356c1d88 [formerly 19610c6adf62f7ebb440d7373832a1c5d60f4fb5] Former-commit-id: 48f31983021b0ff99750c6dabc63b412ef34c83e Former-commit-id: 98eaf63e71f322930ace1f3574bc7fc6e0c55525 Former-commit-id: a716504e5874c330944390c491ac790c991a598f Former-commit-id: 3cb6935ae5fadeb239da1dfa19d1189f6f240e87 Former-commit-id: a457670c4f607c074274362653e516482c532363
67 lines
1.2 KiB
Vue
67 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 highlight from 'highlight.js'
|
|
import '../highlight-styles/github-gist.css'
|
|
import htmlFormat from './libs/htmlFormat'
|
|
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>
|