Use Showodown in Vue.js

Import and use Showdown

In this use case the user can write some MD and convert it to html clicking a button in the form.

Import ShowDown in your project using npm npm install showdown

Add the library to your component:

     import showdown from "showdown"; 

Declare a variable that contains the markdown text:

 data() { 
    return { 
       markdown: '# hello' 

Add a method that convert the markdown in html:

methods: { 
    convert() { 
        let converter = new showdown.Converter(), 
            text = '# hello, markdown!'; 
            this.htmlData = converter.makeHtml(text); 

Add a button to call the conversion from Markdown to HTML:

<button @click="convert">Convert to HTML</button>

Write the html in your page:

<span v-html="htmlData"></span>

v-html tells Vue.js that the content is safe html and can be interpreted.

Super fast WebApp built by Marco using SpringBoot 3 and Java 17 hosted in Switzerland