You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<template>
|
|
|
|
|
<div class="markdown-content" v-html="compiledMarkdown" style="font-size: 14px"></div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref, watch} from 'vue';
|
|
|
|
|
import MarkdownIt from 'markdown-it';
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
markdownString: String
|
|
|
|
|
})
|
|
|
|
|
const compiledMarkdown = ref('')
|
|
|
|
|
const md = new MarkdownIt({
|
|
|
|
|
breaks: true, // 将单个换行符转换为 <br>（而非默认的段落分隔）
|
|
|
|
|
html: true, // 允许 HTML 标签
|
|
|
|
|
// 添加自定义规则处理连续换行
|
|
|
|
|
configure: (md) => {
|
|
|
|
|
md.renderer.rules.hardbreak = (tokens, idx) => {
|
|
|
|
|
return '<br class="custom-break">';
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
watch(() => props.markdownString, (newValue) => {
|
|
|
|
|
if (newValue){
|
|
|
|
|
compiledMarkdown.value = md.render(newValue);
|
|
|
|
|
}
|
|
|
|
|
}, { immediate: true });
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.markdown-content a {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
color: blue
|
|
|
|
|
}
|
|
|
|
|
.markdown-content {
|
|
|
|
|
// 统一行高（根据设计调整数值）
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
|
|
|
|
|
// 段落样式重置
|
|
|
|
|
p {
|
|
|
|
|
margin: 0; // 移除默认上下间距
|
|
|
|
|
//margin-bottom: 0.5em; // 统一段落间距（可选）
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理显式换行（<br>标签）
|
|
|
|
|
br {
|
|
|
|
|
display: block;
|
|
|
|
|
content: ''; // 兼容旧浏览器
|
|
|
|
|
margin-top: 0.5em; // 调整显式换行间距
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理自动换行（确保行间距一致）
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
