ce0b0812d8
Former-commit-id: 51fd4c40e3d45c1d426d90842ba58aea2810aa7c Former-commit-id: 858c106a99c795aa2b1eb3f6d4efeadfb46a2068 Former-commit-id: 305e2fb9469fa614728642ab1b89ad5715d3bc37
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<Container type="ghost">
|
|
<el-row :gutter="10">
|
|
<el-col :span="12">
|
|
<el-card>
|
|
<PageHeader
|
|
slot="header"
|
|
title="代码高亮"
|
|
url="https://github.com/chjj/marked">
|
|
</PageHeader>
|
|
<pre>{{mdSource}}</pre>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card>
|
|
<template slot="header">解析结果</template>
|
|
<div class="markdown-body" v-html="markedHTML"></div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</Container>
|
|
</template>
|
|
|
|
<script>
|
|
import marked from 'marked'
|
|
import highlight from 'highlight.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
mdSource: '',
|
|
markedHTML: ''
|
|
}
|
|
},
|
|
async mounted () {
|
|
this.mdSource = await this.getReadme(this.url)
|
|
this.markedHTML = marked(this.mdSource, {
|
|
highlight: (code) => {
|
|
return highlight.highlightAuto(code).value
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
async getReadme () {
|
|
const data = await this.$axios.get('/static/markdownFiles/demo/base.md')
|
|
return data
|
|
}
|
|
}
|
|
}
|
|
</script> |