<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 hljs from 'highlight.js';

// 配置marked
marked.setOptions({
  renderer: new marked.Renderer(),
  highlight: function(code, lang) {
    try {
      return hljs.highlightAuto(code, [lang]).value;
    } catch (e) {
      return hljs.highlightAuto(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> 