feat: display markdown to html

app/src/components/HintPart.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import sessionStore from '../store/session'
+import markdown2HTML from '../utils/markdown'
 
 const current = ref(-1)
 watch(
@@ -22,6 +23,12 @@ const right = () => {
     current.value += 1
   }
 }
+
+const hints = computed(() => {
+  return sessionStore.session.hints.map((stageHints) =>
+    stageHints.map(markdown2HTML)
+  )
+})
 </script>
 
 <template>
@@ -50,13 +57,13 @@ const right = () => {
       <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ sessionStore.session.hints.length }}
+        {{ hints.length }}
       </p>
       <button
         class="p-2 m-1 w-1/8"
         id="Rbutton"
         @click="right"
-        :disabled="current === sessionStore.session.hints.length - 1"
+        :disabled="current === hints.length - 1"
       >
         <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
       </button>
@@ -65,12 +72,11 @@ const right = () => {
   <div id="hint" class="bg-bg flex flex-wrap p-8">
     <ul>
       <li
-        v-for="hint in sessionStore.session.hints[current]"
+        v-for="hint in hints[current]"
         :key="hint"
         class="text-text font-xl whitespace-pre-wrap"
-      >
-        {{ hint }}
-      </li>
+        v-html="hint"
+      ></li>
     </ul>
     <br />
   </div>

app/src/components/QuestPart.vue

@@ -1,5 +1,23 @@
 <script setup>
+import { computed } from 'vue'
 import sessionStore from '../store/session'
+import markdown2HTML from '../utils/markdown'
+
+const instruction = computed(() => {
+  return markdown2HTML(sessionStore.quest.instruction)
+})
+
+const tasks = computed(() => {
+  return sessionStore.session.tasks.map((task) => {
+    const prefix = task.completed ? '✓' : '➤'
+    const color = task.completed ? 'text-text-primary' : 'text-text'
+    return {
+      ...task,
+      class: `${color} markdown-content`,
+      content: markdown2HTML(`${prefix} ${task.name}`),
+    }
+  })
+})
 </script>
 
 <template>
@@ -10,26 +28,37 @@ import sessionStore from '../store/session'
     <br />
     <div>
       <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
-        <p class="text-text">{{ sessionStore.quest.instruction }}</p>
+        <p class="text-text markdown-content" v-html="instruction"></p>
         <br />
         <p id="tasks" class="text-text">
           <!-- Tasks: -->
           任務：
         </p>
         <ul v-if="sessionStore.session">
-          <li v-for="task in sessionStore.session.tasks" :key="task.id">
-            <p v-if="task.completed" class="text-text-primary">
-              <span class=""> ✓</span>
-              {{ task.name }}
-            </p>
-            <p v-else class="text-text">
-              <span class="">➤</span>
-              {{ task.name }}
-            </p>
-          </li>
+          <li
+            v-for="task in tasks"
+            :key="task.id"
+            :class="task.class"
+            v-html="task.content"
+          ></li>
         </ul>
       </div>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>
 </template>
+
+<style scoped>
+.markdown-content :deep(p) {
+  margin: 0;
+  color: 'red';
+  padding: 0;
+}
+
+.markdown-content :deep(code) {
+  background-color: #282a33;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  font-size: 0.875rem;
+}
+</style>