<template>
  <div class="markdown-content" v-html="compiledMarkdown" style="font-size: 14px"></div>
</template>
<script setup>
import { ref, watch} from 'vue';
import MarkdownIt from 'markdown-it';
const props = defineProps({
  markdownString: String
})
const compiledMarkdown = ref('')
const md = new MarkdownIt()
watch(() => props.markdownString, (newValue) => {
  if (newValue){
    compiledMarkdown.value = md.render(newValue.replace("\n","\n\n"));
  }
}, { immediate: true });
</script>
<style lang="scss">
.markdown-content a {
  text-decoration: underline;
  color: blue
}
</style>