<script setup lang="ts">
import md from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark-dimmed.min.css'

const renderer = md({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs" style="overflow-x: auto"><code>${
          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
        }</code></pre>`
      } catch {
        /* ignore */
      }
    }

    return (
      '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>'
    )
  },
})

defineProps({
  source: {
    type: String,
    required: true,
  },
})
</script>

<template>
  <article
    class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
    v-html="
      renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))
    "
  ></article>
</template>

<style>
think {
  @apply block my-4 p-3 bg-[#f0f8ff] border-l-4 border-[#88f] rounded italic text-xs;
}
</style>
