spoiler tag

docs/.vitepress/theme/components/Details.vue

@@ -1,7 +1,7 @@
 <template>
   <details>
     <summary :class="$style.summary">{{ summary }}</summary>
-    <blockquote>
+    <blockquote :class="$style.inner">
       <slot />
     </blockquote>
   </details>
@@ -17,4 +17,8 @@ defineProps<{
 .summary {
   margin-top: -1em !important;
 }
+
+.inner p {
+  margin: 16px 0;
+}
 </style>

docs/.vitepress/theme/components/TTS.vue

@@ -1,10 +1,10 @@
 <template>
   <span>
-    <span ref="main">
+    <span ref="main" :class="class">
       <slot />
     </span>
     <span>
-      <button type="button" @click="playAudio()">▶️</button>
+      <button type="button" @click="playAudio()">🎤︎︎</button>
     </span>
   </span>
 </template>
@@ -13,6 +13,7 @@
 import { useTemplateRef } from "vue";
 
 const { lang = "ko" } = defineProps<{
+  class?: string;
   lang?: string;
 }>();
 

docs/.vitepress/theme/custom.css

@@ -0,0 +1,3 @@
+.spoiler:not(:hover) {
+  filter: blur(5px);
+}

docs/.vitepress/theme/index.ts

@@ -1,3 +1,4 @@
+import "./custom.css";
 import "./style.css";
 
 import DefaultTheme from "vitepress/theme";