no message
Former-commit-id: 27b76acdd44c7ea3cc0355a55d8cc1945adc54c3 Former-commit-id: 82f8695364c45bdbc8eb3379e6a4e7cc354de250 Former-commit-id: b5c05e19486bacb03b784ad27ab22d3968124cfe
This commit is contained in:
49
src/pages/demo/components/markdown/demoRender.vue
Normal file
49
src/pages/demo/components/markdown/demoRender.vue
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<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/baseMarkdowmFile.md')
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -109,6 +109,16 @@ export const menu = {
|
|||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
},
|
},
|
||||||
component: resolve => { require(['@/pages/demo/components/markdown/demoHighlight.vue'], resolve) }
|
component: resolve => { require(['@/pages/demo/components/markdown/demoHighlight.vue'], resolve) }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '自定义渲染',
|
||||||
|
icon: 'file-o',
|
||||||
|
path: 'marked/demoRender',
|
||||||
|
name: 'demo-components-markdown-demoRender',
|
||||||
|
meta: {
|
||||||
|
requiresAuth: true
|
||||||
|
},
|
||||||
|
component: resolve => { require(['@/pages/demo/components/markdown/demoRender.vue'], resolve) }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user