Initial project

src/components/markdown-view/index.vue

@@ -0,0 +1,42 @@
+<template>
+	<div
+		class="tui-markdown-view selectable break-all line-numbers"
+		v-html="markdownHTML"
+		:data-max-height="maxHeight"
+	></div>
+</template>
+<script lang="ts" setup>
+import Prism from "prismjs";
+import Markdown from "~/utils/Markdown";
+
+defineOptions({
+	name: "MarkdownView"
+});
+
+const props = withDefaults(defineProps<{
+	content?: string;
+	showCodeBorder?: boolean;
+	maxHeight?: string;
+}>(), {
+	content: "",
+	showCodeBorder: true,
+	maxHeight: "400px"
+});
+const { content } = toRefs(props);
+const markdownHTML = ref("");
+
+const doRender = async () => {
+	markdownHTML.value = await Markdown.getInstance().toHTML(content.value);
+	await nextTick();
+	Prism.highlightAll();
+};
+
+watch(() => props.content, doRender);
+onMounted(doRender);
+</script>
+<style lang="less" scoped>
+.tui-markdown-view {
+	width: 100%;
+	overflow: auto;
+}
+</style>