게시물 HTML 블록 분리

components/content/ProseHtml.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { sanitizeHtmlBlock } from '../../lib/markdown-html-block.js'
+
+const props = defineProps({
+  html: {
+    type: String,
+    default: ''
+  }
+})
+
+const sanitizedHtml = computed(() => sanitizeHtmlBlock(props.html))
+</script>
+
+<template>
+  <div
+    v-if="sanitizedHtml"
+    class="prose-html prose-html-block mb-8 overflow-x-auto text-base leading-7 text-[var(--site-text)]"
+    v-html="sanitizedHtml"
+  />
+  <p v-else class="prose-html prose-html-block mb-8 text-sm font-semibold text-[var(--site-muted)]">
+    표시할 수 있는 HTML이 없습니다.
+  </p>
+</template>
+
+<style scoped>
+.prose-html :deep(table) {
+  width: 100%;
+  min-width: 520px;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.prose-html :deep(th),
+.prose-html :deep(td) {
+  border: 1px solid var(--site-line);
+  padding: 0.5rem 0.75rem;
+  vertical-align: top;
+}
+
+.prose-html :deep(th) {
+  background: color-mix(in srgb, var(--site-text) 6%, transparent);
+  font-weight: 700;
+}
+
+.prose-html :deep(p) {
+  margin-bottom: 0.625rem;
+}
+
+.prose-html :deep(a) {
+  color: var(--site-accent);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+</style>