<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 (_) {}
    }

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

const props = 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 scoped></style>