markdown support

nginx/vue/package.json

@@ -12,7 +12,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mdit/plugin-katex": "^0.24.1",
     "axios": "^1.13.2",
+    "katex": "^0.16.27",
+    "markdown-it": "^14.1.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3"

nginx/vue/src/components/home/Feed.vue

@@ -1,4 +1,6 @@
 <script setup>
+import Markdown from "@/components/quick/Markdown.vue";
+
 import { ref, onMounted } from "vue";
 import axios from "axios";
 import { useAuthStore } from "@/stores/auth";
@@ -68,7 +70,7 @@ onMounted(() => {
 <template>
     <div v-if="fetched" class="flex-col pad scroll-y left-content">
         <h2>{{ post.title }}</h2>
-        <div class="fill wrap">{{ post.content }}</div>
+        <Markdown class="fill wrap" :source="post.content" />
         <p>by: {{ post.author.username }}</p>
         <small
             >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small

nginx/vue/src/views/notes/Vue.vue

@@ -1,8 +1,17 @@
+<script setup>
+import Markdown from "@/components/quick/Markdown.vue";
+
+const source = `
+The gaussian is $\\frac{1}{\\sqrt{2\\pi}}e^{-\\frac{x^2}{2}}$.
+`;
+</script>
+
 <template>
     <main class="center-content flex-col">
         <div class="a4page-portrait bdr-1 flex-col relative scroll-y">
             <h1>These are my notes about Vue.js</h1>
             <h1>Pinia</h1>
+            <Markdown :source="source" />
             <h1>Composition API</h1>
         </div>
     </main>