Dynamic MD rendering from string

[prokop321]

Hi, I love all the benefits that comes with this library, but I have one issue and not sure how to solve it.

I am currently working on small editor and I want to show the result immediately side by side. I was able to find way to render static string by using markdownParser.parse() and <ContentRenderer /> but I think that is not the best way, and when the source string change I wasn't able to find some elegant way to render it with fresh content...

So is there some way to accomplish live MD rendering using Nuxt Content.

Thank you.

[hanyujie2002]

I encountered the same problem and resolved it using @nuxt/mdc.

Note

1. ensure you have @nuxtjs/mdc installed by running: npx nuxi@latest module add mdc
2. one limitation of mdc is that it doesn't handle empty strings, so I used a processed string instead.
3. You have to add .client to your file name, or install remark-emoji to work properly.

Here's my code:

<template>
  <div>
     <textarea v-model="inputText" placeholder="Enter text to render" />
     <MDC :value="processedInputText"></MDC>
  </div>
</template>

<script setup>
const inputText = ref('# hello world')

const processedInputText = computed(() => inputText.value.length > 0 ? inputText.value : 'No content yet');
</script>

[hanyujie2002]

More discussions see #924