homebox/frontend/components/global/Markdown.vue

83 lines
1.4 KiB
Vue
Raw Permalink Normal View History

<script setup lang="ts">
import MarkdownIt from "markdown-it";
import DOMPurify from "dompurify";
type Props = {
source: string | null | undefined;
};
const props = withDefaults(defineProps<Props>(), {
source: null,
});
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true,
});
const raw = computed(() => {
const html = md.render(props.source || "");
return DOMPurify.sanitize(html);
});
</script>
<template>
<div class="markdown" v-html="raw"></div>
</template>
<style scoped>
* {
--y-gap: 0.65rem;
}
.markdown > :first-child {
margin-top: 0px !important;
}
.markdown :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
margin-top: var(--y-gap);
margin-bottom: var(--y-gap);
}
.markdown :where(ul) {
list-style: disc;
margin-left: 2rem;
}
.markdown :where(ol) {
list-style: decimal;
margin-left: 2rem;
}
/* Heading Styles */
.markdown :where(h1) {
font-size: 2rem;
font-weight: 700;
}
.markdown :where(h2) {
font-size: 1.5rem;
font-weight: 700;
}
.markdown :where(h3) {
font-size: 1.25rem;
font-weight: 700;
}
.markdown :where(h4) {
font-size: 1rem;
font-weight: 700;
}
.markdown :where(h5) {
font-size: 0.875rem;
font-weight: 700;
}
.markdown :where(h6) {
font-size: 0.75rem;
font-weight: 700;
}
</style>