How to render "markdowns with html" in a template of vue using 'vue3-markdown-it' or other dependency?

Viewed 336

I'm using "vue3-markdown-it": "^1.0.10" as dependency to be able to render markdown content in my components of vue.

I added the following in vue.config.json to enable the dependency on the project

configureWebpack: {
    module: {
      rules: [
        {
          test: /\.md$/i,
          loader: "raw-loader",
        },
      ],
    },
}

And I have the following content in Home.vue

<template>
...
<Markdown :source="indice" class="indice"/>
<Markdown :source="home"/>
...
</template>

<script>
...
import home_md from '@/markdown/home.md';
import indice_md from '@/markdown/indice.md';
...
data: function() {
    return {
      home: home_md,
      indice: indice_md
    }
  },
...
</script>

And in the markdown file home.md I have

...
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img src="https://wpdirecto.com/wp-content/uploads/2017/08/alt-de-una-imagen.png"></img>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
...

But it only renders all the markdown syntax, but the html doesn't render for me like it does on github, for example (which is what I'm looking to do)

output preview

Is there a way to render as html all that string that it ignores, in addition to rendering the entire markdown part?

I understand that instead of using <img src="..."></img> I can use ![](...) but this is just an example of a need I will need later when using <div>

0 Answers
Related