42 lines
847 B
Vue
42 lines
847 B
Vue
<script setup lang="ts">
|
|
import hljs from "highlight.js"
|
|
import markdownit from "markdown-it"
|
|
|
|
const { content } = defineProps<{
|
|
content: string
|
|
}>()
|
|
|
|
const md = markdownit({
|
|
html: true,
|
|
linkify: true,
|
|
typographer: true,
|
|
highlight(str, lang) {
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
try {
|
|
return hljs.highlight(str, { language: lang }).value
|
|
}
|
|
// eslint-disable-next-line unused-imports/no-unused-vars
|
|
catch (__) { }
|
|
}
|
|
|
|
return "" // use external default escaping
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="markdown-body w-full text-base break-words whitespace-normal" v-html="md.render(content)">
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.markdown-body :deep(pre) {
|
|
background: #fafafacc;
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
overflow-x: auto;
|
|
margin: 8px 0;
|
|
}
|
|
</style>
|