77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<view class="markdown-container">
|
||
|
|
<mp-html :content="renderedContent" :domain="domain" :lazy-load="true" :scroll-table="true" :selectable="true" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import marked from 'marked';
|
||
|
|
import { highlight } from 'highlight.js';
|
||
|
|
|
||
|
|
// 配置marked
|
||
|
|
marked.setOptions({
|
||
|
|
renderer: new marked.Renderer(),
|
||
|
|
highlight: function(code, lang) {
|
||
|
|
try {
|
||
|
|
return highlight(lang, code).value;
|
||
|
|
} catch (e) {
|
||
|
|
return highlight('plaintext', code).value;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
gfm: true,
|
||
|
|
breaks: true,
|
||
|
|
pedantic: false,
|
||
|
|
sanitize: false,
|
||
|
|
smartLists: true,
|
||
|
|
smartypants: false
|
||
|
|
});
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MarkdownViewer',
|
||
|
|
props: {
|
||
|
|
// Markdown原始内容
|
||
|
|
content: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
// 主域名（用于链接拼接）
|
||
|
|
domain: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
// 自定义样式
|
||
|
|
customStyle: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 将Markdown转换为HTML
|
||
|
|
renderedContent() {
|
||
|
|
if (!this.content) return '';
|
||
|
|
try {
|
||
|
|
// 添加自定义样式
|
||
|
|
const styleTag = this.customStyle ?
|
||
|
|
`<style>${this.customStyle}</style>` : '';
|
||
|
|
|
||
|
|
// 渲染Markdown为HTML
|
||
|
|
const htmlContent = marked(this.content);
|
||
|
|
|
||
|
|
// 返回带样式的HTML
|
||
|
|
return styleTag + htmlContent;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Markdown渲染错误:', error);
|
||
|
|
return `<p style="color: red;">Markdown渲染错误</p>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@import './highlight.css';
|
||
|
|
|
||
|
|
.markdown-container {
|
||
|
|
padding: 20rpx;
|
||
|
|
}
|
||
|
|
</style>
|