Vue Markdown FAQ

MarkdownFaq.vue

<template>
  <div :class="cssClass">
   <div v-html="html" ref="html"/>
  </div>
</template>

<script>
/**
 * This component takes some markdown and then presents it as a
 * collapsable list.
 * 
 * @author Andre-John Mas 
 */
import markdownIt from 'markdown-it';
import markdownItAttrs from 'markdown-it-attrs';
import markdownItHeadersSections from 'markdown-it-header-sections';

const markdownRenderer = markdownIt()
  .use(markdownItAttrs)
  .use(markdownItHeadersSections);

export default {
  props: {
    markdown: String,
    headerLevel: {
      type: String,
      default: 'h2'
    },
    cssClass: {
      type: String,
      default: 'faq-card'
    }
  },
  mounted () {
    this.initialize();
  },
  watch: {
    markdown () {
      // reinitialize since the markdown has changed
      this.initialize();
    }
  },
  methods: {
    initialize () {
      if (this.markdown.trim().length > 0) {
        const htmlDiv = this.$refs.html;
        const headers = htmlDiv.querySelectorAll('h2');
        if (headers && headers.length > 0) {
          for (let i = 0; i < headers.length; i++) {
            headers[i].addEventListener('click', (event) => {
              if (headers[i].parentNode.className.indexOf('expanded') > -1) {
                headers[i].parentNode.className =
                  headers[i].parentNode.className.replace('expanded','');
              } else {
                headers[i].parentNode.className += 'expanded';
              }
            });
          }
        }
      }
    }
  },
  computed: {
    html () {
      if (this.markdown) {
        return markdownRenderer.render(this.markdown);
      }
      return '';
    }
  }
};
</script>

<style lang="scss">
.faq-card {
  font-size: 14px;

  section {
    border: solid 1px rgb(231, 231, 231);
    padding: 0px;
    margin-bottom: -1px;

    h2 {
      color: rgb(35, 138, 223);
      font-size: inherit;
      font-weight: initial;
      padding: 5px;
      margin: 0;
      line-height: initial;
      width: 100%;
      cursor: pointer;
      &:hover {
        background: Highlight; /* rgb(220, 240, 247); */
        color: HighlightText;
      }
    }

    > p {
      margin-top: 10px;
    }

    > *:not(h2) {
      display: none;
      margin-left: 10px;
    }

    &.expanded * {
      display: revert;
    }

    h2::before {
      font-size: 130%;
      content: '▸ ';
    }

    &.expanded h2::before {
      font-size: 130%;
      content: '▾ ';
    }
  }

  a {
    color: rgb(35, 138, 223);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>