55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<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>
|