04f9ef1a19
Former-commit-id: e701aacf23cc8788415897a957d90d50f02ec915 [formerly e701aacf23cc8788415897a957d90d50f02ec915 [formerly e701aacf23cc8788415897a957d90d50f02ec915 [formerly e701aacf23cc8788415897a957d90d50f02ec915 [formerly 05ecd4d691f0399f0a45841f87f28ab8fa209ad8 [formerly dc8b3924307f1834519d6d2adbe0b3eab2f0b9f9]]]]] Former-commit-id: 5057dacc82842dadce57d2889423e7991ed10641 Former-commit-id: 1ecc5c9c9f329600c1779a920a5b6e7d50e3db4d Former-commit-id: 920ca6317275138866e8da9dc63e5f5b106f3352 [formerly f407e4fe88064c4ade2544991034394f97c9a5ab] Former-commit-id: e8dbe199693eb22b90241c1e36039ecf56cc9817 Former-commit-id: 41d4626eb9a8d36442f23d1ae032cdccefa52ba0 Former-commit-id: 962ea8fe670039e21701d2ba9757387b6cb244d2 Former-commit-id: df96608847d3282c1fa9d18a29f7c1709c50d0cc Former-commit-id: 8661b8b0172ff0b0cd7b6880a7953cfc6942d258
52 lines
978 B
Vue
52 lines
978 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 htmlFormat from './libs/htmlFormat'
|
|
import highlight from 'highlight.js'
|
|
export default {
|
|
name: 'd2-highlight',
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
required: false,
|
|
default: `console.log('you lost code prop')`
|
|
},
|
|
formatHtml: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
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).value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.d2-highlight {
|
|
margin: 0px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|