You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.2 KiB
Vue
91 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const note = useNote()
|
|
const parsedMarkdown = computed(() => {
|
|
return stringToMarkdown(note.value.description)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="scrollbar-hidden flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll px-12 py-4">
|
|
<div
|
|
class="scrollbar-hidden h-full max-h-full w-full"
|
|
v-html="parsedMarkdown">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(*) {
|
|
@apply my-4 text-[#E6EDF3];
|
|
}
|
|
|
|
/* Headers */
|
|
:deep(h1),
|
|
:deep(h2),
|
|
:deep(h3),
|
|
:deep(h4),
|
|
:deep(h5),
|
|
:deep(h6) {
|
|
@apply border-b border-lightgray pb-2;
|
|
}
|
|
|
|
:deep(h1) {
|
|
@apply mt-12 text-4xl;
|
|
}
|
|
|
|
:deep(h2) {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
:deep(h3) {
|
|
@apply text-lg;
|
|
}
|
|
|
|
:deep(h4) {
|
|
@apply text-base;
|
|
}
|
|
|
|
:deep(h5) {
|
|
@apply text-sm;
|
|
}
|
|
|
|
:deep(h6) {
|
|
@apply text-xs;
|
|
}
|
|
|
|
/* Lists */
|
|
:deep(ul li),
|
|
:deep(ol li) {
|
|
@apply my-2 pl-8;
|
|
}
|
|
|
|
:deep(ul) {
|
|
@apply list-inside list-disc;
|
|
}
|
|
|
|
:deep(ol) {
|
|
counter-reset: list;
|
|
}
|
|
|
|
:deep(ol li::before) {
|
|
counter-increment: list;
|
|
content: counters(list, '.') ' ';
|
|
}
|
|
|
|
/* Checkbox */
|
|
:deep(input[type='checkbox']) {
|
|
@apply mr-2;
|
|
}
|
|
|
|
/* Code Block */
|
|
:deep(pre) {
|
|
@apply bg-lightgray p-2;
|
|
}
|
|
|
|
/* Quotes */
|
|
:deep(blockquote) {
|
|
@apply border-l-4 border-l-[#E6EDF3] pl-4;
|
|
}
|
|
</style>
|