<script setup lang="ts">
import hljs from "highlight.js"
import markdownit from "markdown-it"

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

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
  },
})
</script>

<template>
  <div class="markdown-body w-full text-base break-words whitespace-normal" v-html="md.render(content)">
  </div>
</template>

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