<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>