blog/components/article/content.vue

<template>
    <article :class="[$style.content, 'prose prose-invert prose-code:before:content-none prose-code:after:content-none']" v-html="body"></article>
</template>

<script lang="ts" setup>
defineProps<{
    body: string;
}>();
</script>

<style lang="postcss" module>
.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
    scroll-margin-top: 8rem;
    @apply block relative;
}

.content img {
    @apply drop-shadow-2xl w-full rounded bg-zinc-900 ring-1 ring-white/10 mx-auto;
}

.content figure figcaption img {
    @apply h-6 w-6 flex-none rounded-full bg-gray-800;
}

.content :global :has(.header-anchor):hover .header-anchor {
    @apply opacity-100;
}

.content :global .header-anchor {
    @apply no-underline absolute size-6 md:w-auto text-right opacity-0 duration-75 left-[calc(100%-3.75rem)] md:-left-10 text-gray-200
}

.content :global .header-anchor::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5em' width='1.5em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.068 5.068 0 0 1-7.127 0a4.972 4.972 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E");
}

.content ul li input[type="checkbox"],
.content ol li input[type="checkbox"] {
    @apply rounded text-orange-500 mb-0 mt-0 mr-3;
}

.content pre:has(code) {
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
    overflow-x: auto;
    @apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
}

.content pre code {
    @apply block p-0;
}

.content code:not(pre code) {
    @apply rounded px-2 py-1 ring-1 ring-white/10 bg-white/5;
}
</style>