<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { parseMarkdown, ensureStyles } from '@/utils/markdown'

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

const html = computed(() => parseMarkdown(props.content))

onMounted(ensureStyles)
</script>

<template>
  <div class="md-content" v-html="html"></div>
</template>

<style scoped>
.md-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
}
</style>
