<script setup lang="ts">
import hljs from "highlight.js";
import markdownit from "markdown-it";
import { useWindowWidth } from "@/utils";

const { content } = defineProps<{
  content: string;
}>();

const windowWidth = useWindowWidth();

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
  }
});

// // 计算代码块宽度
const codeWidth = computed(() => {
  return windowWidth.value - 160 - 200; // 减去左右边距和其他元素的宽度
});
</script>

<template>
  <div
    class="markdown-body w-full text-base break-words whitespace-normal"
    :style="{ '--code-width': `${codeWidth}px` }"
    v-html="md.render(content)"
  ></div>
</template>

<style scoped>
.markdown-body :deep(pre) {
  width: var(--code-width, 100%);
  max-width: 100%;
  background: #fafafacc;
  border-radius: 6px;
  padding: 16px;
  font-size: 14px;
  overflow-x: auto;
  margin: 8px 0;
}

.markdown-body :deep(pre)::-webkit-scrollbar {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
}

.markdown-body :deep(pre)::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.markdown-body :deep(pre)::-webkit-scrollbar-thumb:hover {
  background: #999;
}
</style>
