Markdown format is popular. It is simple, easy to read, and widely supported. That's why we choose it as the format of the card description.

We will convert the card description written in Markdown format to HTML on the fly so that we do not need to store converted HTML in the database. To implement this feature, we will use the library, Showdown (https://github.com/showdownjs/showdown).

The following is how to use Showdown to support the Markdown format:

<template>
  <div class="modal" id="cardModal">
    ...
    <div class="description" v-show="description && 
    !editingDescription" 
      v-html="descriptionHtml"></div>
    ...
  </div>
</template>

<script>
...
import showdown from 'showdown'

showdown.setOption('strikethrough', true)
showdown.setOption('tables', true)
const markdownConverter = new showdown.Converter()

export default {
  name: 'CardModal',
  ...
  computed: {
    descriptionHtml () {
      if (!this.description) {
        return ''
      }
      return markdownConverter.makeHtml(this.description)
    },
    ...
  },
  ... 
}
</script>

As you can see, we create a showdown converter instance which can be reused, and we use v-html to bind the .description element to the converted HTML code, which is a computed property, called descriptionHtml. Inside the property, we call the makeHtml() method of the markdown converter instance. That's it. We now support Markdown format in our card description.