MarkdownRenderer.vue

<script setup lang="ts">
import showdown from "showdown";
import DOMPurify from "dompurify";
import { computed } from "vue";

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

const converter = new showdown.Converter({
  tables: true,
  ghCodeBLocks: false,
});
converter.setFlavor("github");
const outputHtml = computed(() => {
  const dirtyHTML = converter.makeHtml(props.markdown);
  return DOMPurify.sanitize(dirtyHTML);
});
</script>

<template>
  <div v-html="outputHtml"></div>
</template>

<style></style>