|
|
|
|
@ -0,0 +1,113 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="markdown-body" v-html="compiledMarkdown" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, watch } from 'vue'
|
|
|
|
|
import { marked } from 'marked'
|
|
|
|
|
import { markedHighlight } from 'marked-highlight'
|
|
|
|
|
import hljs from 'highlight.js'
|
|
|
|
|
import 'highlight.js/styles/github.css' // 可替换为其他主题，例如 'atom-one-dark.css'
|
|
|
|
|
|
|
|
|
|
// props
|
|
|
|
|
const props = defineProps<{
|
|
|
|
|
content: string
|
|
|
|
|
}>()
|
|
|
|
|
|
|
|
|
|
const compiledMarkdown = ref('')
|
|
|
|
|
|
|
|
|
|
// 配置 marked 的高亮插件
|
|
|
|
|
marked.use(
|
|
|
|
|
markedHighlight({
|
|
|
|
|
langPrefix: 'hljs language-',
|
|
|
|
|
highlight(code: string, lang: string): string {
|
|
|
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
|
|
|
return hljs.highlight(code, { language: lang }).value
|
|
|
|
|
}
|
|
|
|
|
return hljs.highlightAuto(code).value
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
// 渲染 Markdown
|
|
|
|
|
async function renderMarkdown() {
|
|
|
|
|
compiledMarkdown.value = await marked.parse(props.content || '')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 监听 props.content
|
|
|
|
|
watch(() => props.content, renderMarkdown, { immediate: true })
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.markdown-body {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
color: #1a1a1a;
|
|
|
|
|
|
|
|
|
|
h1, h2, h3, h4 {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin: 1.2em 0 0.6em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 { font-size: 1.8em; }
|
|
|
|
|
h2 { font-size: 1.5em; }
|
|
|
|
|
h3 { font-size: 1.2em; }
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: #0366d6;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
|
background: #f6f8fa;
|
|
|
|
|
padding: 0.2em 0.4em;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-family: 'Courier New', Courier, monospace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
background: #f6f8fa;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
|
border-left: 4px solid #dfe2e5;
|
|
|
|
|
padding-left: 1em;
|
|
|
|
|
color: #6a737d;
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul, ol {
|
|
|
|
|
padding-left: 2em;
|
|
|
|
|
margin: 0.5em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
margin: 0.5em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th, td {
|
|
|
|
|
border: 1px solid #dfe2e5;
|
|
|
|
|
padding: 0.6em 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th {
|
|
|
|
|
background-color: #f6f8fa;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
