Компонент для рендеринга Markdown с помощью Nuxt Content
Пример компонента Nuxt, который рендерит любую строку, содержащую разметку Markdown, в HTML при помощи модуля Nuxt Content.
Ниже приведён код компонента Nuxt, который рендерит любую строку, содержащую разметку Markdown, в HTML при помощи модуля Nuxt Content.
<script setup>
// components/MarkdownStringRenderer.vue
import markdownParser from "@nuxt/content/transformers/markdown";
const props = defineProps({
markdownString: {
type: String,
required: true,
},
});
const record = ref("");
watchEffect(async () => {
await markdownParser
.parse("custom.md", props.markdownString)
.then((md) => (record.value = md));
});
</script>
<template>
<div class="content">
<ContentRendererMarkdown :value="record" v-if="record" />
</div>
</template>
Пример использования этого компонента:
<MarkdownStringRenderer :markdownString="description" />
Содержимое компонента будет обновляться реактивно, при каждом изменении значения переменной description
, что очень удобно, например, для создания превью вводимого текста с разметкой Markdown.
См. также пример использования в одном из моих проектов.
Александр Голдовский · 03.05.2023 · 698
Отправить сообщение
С помощью формы ниже, вы можете связаться с автором сайта. Пожалуйста, укажите ваш ник в Телеграме или e-mail, чтобы я смог вам ответить!