<template>
    <div class="grid grid-cols-1">
        <article class="prose dark:prose-invert max-w-none" v-html="mdHtml"></article>
    </div>
</template>
<script setup>
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
const props = defineProps({
    content: String
})
const mdHtml = ref('')
const initMarkdownIt = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre><code class="language-${lang} hljs">` +
               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
               '</code></pre>'
      } catch (__) {}
    }

    return '<pre><code class="language-none hljs">' + initMarkdownIt.utils.escapeHtml(str) + '</code></pre>'
  }
})
const handleRenderMd = () => {
    mdHtml.value = initMarkdownIt.render(props.content || '')
}
watch( () => props.content, () => {
    handleRenderMd()
}, { immediate: true })
</script>