no message
Former-commit-id: 2307a927de9d95108586522b33bcab9a8941d30e Former-commit-id: e0d45eab6717de74eb4ba3516f106340a881cf5a Former-commit-id: 63f175e2c381710a8e53c338f7cfad56c06a37e0
This commit is contained in:
李杨
@@ -10,6 +10,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import marked from 'marked'
|
import marked from 'marked'
|
||||||
import highlight from 'highlight.js'
|
import highlight from 'highlight.js'
|
||||||
|
import bandupan from './plugin/baidupan'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
url: {
|
url: {
|
||||||
@@ -66,18 +67,19 @@ export default {
|
|||||||
marked (data) {
|
marked (data) {
|
||||||
const renderer = new marked.Renderer()
|
const renderer = new marked.Renderer()
|
||||||
renderer.blockquote = (quote) => {
|
renderer.blockquote = (quote) => {
|
||||||
|
bandupan().then(() => {
|
||||||
|
console.log('----')
|
||||||
|
})
|
||||||
const _quote = quote.replace(/<[^<>]+>/g, '').trim()
|
const _quote = quote.replace(/<[^<>]+>/g, '').trim()
|
||||||
const bdShareUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
|
const bdShareUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
|
||||||
const bdShareUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
|
const bdShareUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
|
||||||
if (bdShareUrl.test(_quote)) {
|
if (bdShareUrl.test(_quote)) {
|
||||||
return `<div style="color: red;">${_quote}</div>`
|
return `<div style="color: red;">${_quote}</div>`
|
||||||
}
|
} else if (bdShareUrlPwd.test(_quote)) {
|
||||||
if (bdShareUrlPwd.test(_quote)) {
|
|
||||||
const url = _quote.match(/https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+/i)
|
const url = _quote.match(/https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+/i)
|
||||||
const pwd = _quote.match(/[a-z0-9]{4}$/i)
|
const pwd = _quote.match(/[a-z0-9]{4}$/i)
|
||||||
return `<div style="color: blue;">${url[0]} - ${pwd[0]}</div>`
|
return `<div style="color: blue;">${url[0]} - ${pwd[0]}</div>`
|
||||||
}
|
}
|
||||||
// 一般的
|
|
||||||
return `<blockquote>${quote}</blockquote>`
|
return `<blockquote>${quote}</blockquote>`
|
||||||
}
|
}
|
||||||
return marked(data, {
|
return marked(data, {
|
||||||
|
|||||||
5
src/components/core/Markdown/plugin/baidupan.js
Normal file
5
src/components/core/Markdown/plugin/baidupan.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default (quote) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -1,44 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container type="ghost">
|
<Container>
|
||||||
<el-row :gutter="10">
|
<markdown url="/static/markdownFiles/article/组件 - markdown.md"></markdown>
|
||||||
<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>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
import marked from 'marked'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
mdSource: '',
|
|
||||||
markedHTML: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async mounted () {
|
|
||||||
this.mdSource = await this.getReadme(this.url)
|
|
||||||
this.markedHTML = marked(this.mdSource)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getReadme () {
|
|
||||||
const data = await this.$axios.get('/static/markdownFiles/demo/base.md')
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
<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'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
mdSource: '',
|
|
||||||
markedHTML: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async mounted () {
|
|
||||||
this.mdSource = await this.getReadme(this.url)
|
|
||||||
const renderer = new marked.Renderer()
|
|
||||||
renderer.blockquote = (quote) => {
|
|
||||||
// 获取去掉HTML标签的内容
|
|
||||||
const _quote = quote.replace(/<[^<>]+>/g, '').trim()
|
|
||||||
// 分享链接地址
|
|
||||||
const bdShareUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
|
|
||||||
// 带密码的分享链接
|
|
||||||
const bdShareUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
|
|
||||||
// 如果是一般的分享链接
|
|
||||||
if (bdShareUrl.test(_quote)) {
|
|
||||||
return `<div style="color: red;">${_quote}</div>`
|
|
||||||
}
|
|
||||||
// 如果是带有密码的分享链接
|
|
||||||
if (bdShareUrlPwd.test(_quote)) {
|
|
||||||
const url = _quote.match(/https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+/i)
|
|
||||||
const pwd = _quote.match(/[a-z0-9]{4}$/i)
|
|
||||||
return `<div style="color: blue;">${url[0]} - ${pwd[0]}</div>`
|
|
||||||
}
|
|
||||||
// 一般的
|
|
||||||
return `<blockquote>${quote}</blockquote>`
|
|
||||||
}
|
|
||||||
this.markedHTML = marked(this.mdSource, {
|
|
||||||
renderer
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getReadme () {
|
|
||||||
const data = await this.$axios.get('/static/markdownFiles/demo/baiduyun.md')
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -99,26 +99,6 @@ export const menu = {
|
|||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
},
|
},
|
||||||
component: resolve => { require(['@/pages/demo/components/markdown/demo.vue'], resolve) }
|
component: resolve => { require(['@/pages/demo/components/markdown/demo.vue'], resolve) }
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '代码高亮',
|
|
||||||
icon: 'file-o',
|
|
||||||
path: 'marked/demoHighlight',
|
|
||||||
name: 'demo-components-markdown-demoHighlight',
|
|
||||||
meta: {
|
|
||||||
requiresAuth: true
|
|
||||||
},
|
|
||||||
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) }
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -10,4 +10,4 @@
|
|||||||
|
|
||||||
百度云私密分享链接
|
百度云私密分享链接
|
||||||
|
|
||||||
> 链接: https://pan.baidu.com/s/1pMNNDZP 密码: vc95
|
> 链接: https://pan.baidu.com/s/1pMNNDZP 密码: vc95
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
[https://github.com/FairyEver](https://github.com/FairyEver)
|
|
||||||
|
|
||||||
> 引用文字
|
|
||||||
|
|
||||||
`JavaScript` 代码
|
|
||||||
|
|
||||||
```
|
|
||||||
const demo = (name = 'vue') => {
|
|
||||||
console.log(name)
|
|
||||||
}
|
|
||||||
demo(
|
|
||||||
```
|
|
||||||
|
|
||||||
`CSS` 代码
|
|
||||||
|
|
||||||
```
|
|
||||||
body {
|
|
||||||
background-color: #333;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
| name | age | sex | delFlag |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| ban | 24 | 0 | 0 |
|
|
||||||
| FairyEver | 24 | 1 | 0 |
|
|
||||||
Reference in New Issue
Block a user