Markdown component

profcomff · Sep 10, 2023 · b9bb49d · b9bb49d
1 parent f1d231c
commit b9bb49d
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
 	},
 	"dependencies": {
 		"axios": "^1.4.0",
+		"markdown-it": "^13.0.1",
 		"material-design-icons-iconfont": "^6.7.0",
 		"pinia": "^2.1.6",
 		"query-string": "^8.1.0",
@@ -29,6 +30,7 @@
 		"workbox-window": "^7.0.0"
 	},
 	"devDependencies": {
+		"@types/markdown-it": "^13.0.1",
 		"@types/node": "^20.5.0",
 		"@types/ua-parser-js": "^0.7.36",
 		"@typescript-eslint/eslint-plugin": "^6.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/MarkdownRenderer.vue b/src/components/MarkdownRenderer.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Markdown from 'markdown-it';
+
+const props = withDefaults(defineProps<{ text: string }>(), { text: '' });
+const markdown = new Markdown();
+</script>
+
+<template>
+	<!-- eslint-disable vue/no-v-html -->
+	<div v-html="markdown.render(props.text)" />
+	<!-- eslint-enable -->
+</template>