feat: support markdown for notes

app/app.css

@@ -112,19 +112,19 @@ html.dark {
 }
 
 .markdown-content h2 {
-  --uno: text-xl mb5 op75 border-b border-base py2;
+  --uno: text-xl mb5 mt4 op75 border-b border-base py2;
 }
 
-.markdown-content p {
-  --uno: mb5;
+.markdown-content p + p {
+  --uno: mt5;
 }
 
-.markdown-content pre {
-  --uno: mb5;
+.markdown-content p > code {
+  --uno: px1.5 py1 bg-hex-8883 rounded max-w-200 of-auto text-sm;
 }
 
 .markdown-content pre {
-  --uno: px3 py2 bg-gray-100 rounded max-w-200 of-auto text-sm;
+  --uno: my4 of-auto px3 py2 rounded-lg;
 }
 
 .markdown-content .shiki {

app/components/SettingsFloat.vue

@@ -73,12 +73,12 @@ const settings = useSettings()
         @click="settings.fontSize = 1"
       />
       <template #popper>
-        <div px4 py3 flex="~ col gap-2">
+        <div flex="~ col gap-2" w-50 px4 py3>
           <div>
             {{ $t("settings.lyricsSize") }}
             <span op50>{{ `${Math.round(settings.fontSize * 100)}%` }}</span>
           </div>
-          <OptionSlider v-model="settings.fontSize" :min="0.6" :max="2" :step="0.2" />
+          <OptionSlider v-model="settings.fontSize" :min="0.6" :max="2" :step="0.2" :default="1" />
         </div>
       </template>
     </Menu>

app/components/SongNotes.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   notes?: string[]
 }>()
+
+const html = computed(() => renderMarkdown(props.notes?.join('\n') || ''))
 </script>
 
 <template>
   <div
+    v-if="notes?.length"
     flex="~ col gap-2 justify-end auto"
     of-auto text-xs text-hex-888
   >
     <div border="t base" my1 h-1px w-30px />
-    <div v-if="notes?.length" break-words text-sm>
-      <div v-for="line, idx of notes" :key="idx">
-        {{ line }}
-      </div>
-    </div>
+    <div
+      break-words text-sm class="markdown-content"
+      v-html="html"
+    />
   </div>
 </template>

app/composables/markdown-it.ts

@@ -0,0 +1,21 @@
+import MarkdownIt from 'markdown-it'
+import Sanitize from 'sanitize-html'
+
+let md: MarkdownIt | null = null
+
+export function renderMarkdown(
+  text: string,
+) {
+  if (!md) {
+    md = new MarkdownIt({
+      // To be safe from XSS, we disable HTML tags
+      xhtmlOut: false,
+      html: false,
+      linkify: true,
+      breaks: true,
+      typographer: true,
+    })
+  }
+
+  return Sanitize(md.render(text))
+}

app/layouts/content.vue

@@ -8,7 +8,7 @@ const isMatchedLocale = computed(() => locale.value === route.meta.locale)
 <template>
   <div
     class="markdown-content"
-    mxa max-w-150 p15 lt-lg="p6 mt-20" line-height-1.7em
+    mxa max-w-175 p15 lt-lg="p6 mt-20" line-height-1.7em
   >
     <BasicNav />
     <div v-if="!isMatchedLocale" mb5 rounded bg-purple:15 px3 py1 text-purple>

package.json

@@ -23,7 +23,9 @@
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "lz-string": "^1.5.0",
+    "markdown-it": "^14.1.0",
     "plain-shiki": "^0.0.12",
+    "sanitize-html": "^2.13.1",
     "shiki-language-lyric": "^0.0.3",
     "simplecc-wasm": "^1.1.0",
     "unstorage": "^1.12.0",
@@ -48,6 +50,7 @@
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/i18n": "^8.5.5",
     "@types/js-yaml": "^4.0.9",
+    "@types/sanitize-html": "^2.13.0",
     "@unocss/eslint-config": "^0.63.4",
     "@unocss/nuxt": "^0.63.4",
     "@vueuse/nuxt": "^11.1.0",