<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>