<template>
  <div class="markdown-body" v-html="renderedHtml"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'

interface Props {
  content: string
  sanitize?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  sanitize: true,
})

// 配置marked库，启用gfm模式以支持单个换行符转换为<br>
marked.setOptions({
  gfm: true,
  breaks: true, // 启用单换行符转换为<br>
})

const renderedHtml = computed(() => {
  if (!props.content) return ''
  const html = marked.parse(props.content) as string
  return props.sanitize ? html : html
})
</script>

<style lang="scss" scoped>
.markdown-body {
  color: #00ffe6;
  font-size: 30px;
  line-height: 1.6;

  :deep(h1),
  :deep(h2),
  :deep(h3),
  :deep(h4),
  :deep(h5),
  :deep(h6) {
    color: #00ffe6;
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
  }

  :deep(h1) {
    font-size: 48px;
  }

  :deep(h2) {
    font-size: 42px;
  }

  :deep(h3) {
    font-size: 36px;
  }

  :deep(p) {
    margin-bottom: 16px;
  }

  :deep(ul),
  :deep(ol) {
    margin-bottom: 16px;
    padding-left: 24px;
  }

  :deep(li) {
    margin-bottom: 8px;
  }

  :deep(strong) {
    color: #00ffe6;
    font-weight: 600;
  }

  :deep(code) {
    background: rgba(0, 255, 230, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 27px;
  }

  :deep(pre) {
    background: rgba(0, 0, 0, 0.3);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 16px;

    code {
      background: none;
      padding: 0;
      font-size: 27px;
    }
  }

  :deep(blockquote) {
    border-left: 4px solid #00ffe6;
    padding-left: 16px;
    margin: 16px 0;
    color: rgba(0, 255, 230, 0.7);
  }

  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }

  :deep(th),
  :deep(td) {
    border: 1px solid rgba(0, 255, 230, 0.3);
    padding: 8px 12px;
    text-align: left;
  }

  :deep(th) {
    background: rgba(0, 255, 230, 0.1);
  }

  :deep(a) {
    color: #00fff4;
    text-decoration: underline;

    &:hover {
      color: #00d6c0;
    }
  }

  :deep(hr) {
    border: none;
    border-top: 1px solid rgba(0, 255, 230, 0.3);
    margin: 24px 0;
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
  }
}
</style>
