Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]]
Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45
Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad
Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee]
Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066
Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26
Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996
Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9
Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions

View File

@@ -1,145 +0,0 @@
<template>
<div class="component-markdown">
<div class="spin-group" v-if="!markedHTML">
<div>正在加载</div>
</div>
<div class="markdown-body" v-html="markedHTML"></div>
</div>
</template>
<script>
import marked from 'marked'
import highlight from 'highlight.js'
import bandupan from './plugin/baidupan'
export default {
name: 'd2-markdown',
props: {
url: {
type: String,
required: false,
default: ''
},
source: {
type: String,
required: false,
default: ''
},
highlight: {
type: Boolean,
required: false,
default: false
},
// 百度网盘分享链接特殊样式
baidupan: {
type: Boolean,
required: false,
default: true
}
},
data () {
return {
getReadmePublicPath: '',
markedHTML: ''
}
},
mounted () {
if (this.url) {
this.initWithUrl()
} else if (this.source) {
this.initWithMd()
} else {
console.log('not mounted init')
}
},
methods: {
// 使用 md 初始化
initWithMd () {
this.markedHTML = this.marked(this.source)
},
// 使用 url 初始化
async initWithUrl () {
this.markedHTML = await this.getReadme(this.url)
},
// 从 url 加载原始数据
async getReadme (name) {
const data = await this.$axios.get(name)
return this.marked(data)
},
marked (data) {
const renderer = new marked.Renderer()
renderer.blockquote = (quote) => {
// 百度网盘
return (this.baidupan && bandupan(quote, this.$assetsPublicPath)) || `<blockquote>${quote}</blockquote>`
}
return marked(data, {
...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {},
renderer
})
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public.scss';
.component-markdown {
.spin-group {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: $color-primary;
}
}
// 百度云
$baidupanHeight: 30px;
$baidupanPadding: 10px;
.baidupan {
overflow: hidden;
margin-bottom: 16px;
.container {
height: $baidupanHeight + 2 * $baidupanPadding;
border-radius: 4px;
border: 1px solid #dfe2e5;
padding: $baidupanPadding;
float: left;
cursor: pointer;
&:hover {
border: 1px solid $color-primary;
.line {
background-color: $color-primary;
}
}
.icon {
float: left;
height: $baidupanHeight;
text-align: center;
width: 40px;
margin-right: $baidupanPadding;
img {
width: 40px;
}
}
.url {
float: left;
height: $baidupanHeight;
line-height: $baidupanHeight;
color: $color-text-main;
}
.line {
float: left;
height: $baidupanHeight + 2 * $baidupanPadding;
width: 1px;
margin: -$baidupanPadding $baidupanPadding;
background-color: #dfe2e5;
}
.pwd {
float: left;
height: $baidupanHeight;
line-height: $baidupanHeight;
}
}
}
</style>