Use Vue to implement the display and parsing of Markdown documents

How to display and parse Markdown documents in Vue?

Markdown is a lightweight markup language that uses simple markup to represent formatting and typography in text. In Vue projects, the use of Markdown documents is becoming more and more common, so how to display and parse Markdown documents in Vue has also become a hot topic. This article will introduce how to use Vue to implement the display and parsing of Markdown documents.

Markdown document display

Showing the Markdown documentation in Vue, we can use some third-party libraries to help us do it. Here we will use vue-markdown, a Vue-based Markdown parser.

Install vue-markdown

First, we need to install vue-markdown using npm or yarn:

npm install vue-markdown --save

or

yarn add vue-markdown

Using vue-markdown

In Vue components, we can use vue-markdown in the following ways:

<template>
  <div>
    <vue-markdown :source="markdown"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';

export default {
  data() {
    return {
      markdown: '# Hello, Vue Markdown!'
    }
  },
  components: {
    VueMarkdown
  }
}
</script>

In the above code, we first introduce vue-markdown through import. Then in the Vue component, we use the vue-markdown component to present the Markdown document and pass the Markdown text to the component as a source property. Finally, we register the VueMarkdown component in the components property.

Custom vue-markdown

In addition to the default Markdown parsing, vue-markdown also provides some configuration options and plugins to help us customize the behavior of the Markdown parser. Here are some commonly used configuration options and plug-ins:

Configuration Options

• breaks: Whether to convert consecutive newlines to<br>Tag, default value isfalse。
• typographer: Whether to enable Typographer functions such as smart quotes and dashes, the default value isfalse。
• linkify: Whether to convert URL to link, the default value isfalse。
• highlight: Whether to enable code highlighting, the default value istrue。

We can use the componentpropsPass these configuration options in the properties:

<template>
  <div>
    <vue-markdown :source="markdown" :breaks="true" :typographer="true" :linkify="true" :highlight="false"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';

export default {
  data() {
    return {
      markdown: 'Hello, **Vue Markdown**!'
    }
  },
  components: {
    VueMarkdown
  }
}
</script>

In the above code, we pass:breaks、:typographer、:linkifyand:highlightProperties pass some configuration options.

Plugin

vue-markdown also supports some plugins that can help us extend the functionality of the Markdown parser. Here are some commonly used plugins:

• markdown-it-anchor: Automatically generate anchor points for the title.
• markdown-it-table-of-contents: The directory where the Markdown document is generated.
• markdown-it-emoji: supports Emoji expressions.
• markdown-it-katex: Supports LaTeX formulas.

We can use these plugins in Vue components in the following ways:

<template>
  <div>
    <vue-markdown :source="markdown" :plugins="plugins"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
import markdownItAnchor from 'markdown-it-anchor';
import markdownItToc from 'markdown-it-table-of-contents';
import markdownItEmoji from 'markdown-it-emoji';
import markdownItKatex from 'markdown-it-katex';

export default {
  data() {
    return {
      markdown: '# Hello, Vue Markdown!',
      plugins: [
        markdownItAnchor,
        [markdownItToc, { includeLevel: [2, 3] }],
        markdownItEmoji,
        markdownItKatex
      ]
    }
  },
  components: {
    VueMarkdown
  }
}
</script>

In the above code, we introduce four plugins through the import statement: markdown-it-anchor, markdown-it-table-of-contents, markdown-it-emoji and markdown-it-katex. Then in the component's data properties, we pass these plugins as arrays to the plugins property, so that we can use these plugins in the Markdown parser.

Markdown document analysis

In addition to presenting Markdown documents, sometimes we need to convert Markdown documents to HTML or other formats. At this time, we can use another third-party library markdown-it, a JavaScript Markdown parser.

Install markdown-it

First, we need to install markdown-it using npm or yarn:

npm install markdown-it --save

or

yarn add markdown-it

Using markdown-it

In Vue components, we can use markdown-it in the following ways:

<template>
  <div>
    <div v-html="html"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it';

export default {
  data() {
    return {
      markdown: '# Hello, Vue Markdown!',
      md: new MarkdownIt()
    }
  },
  computed: {
    html() {
      return ();
    }
  }
}
</script>

In the above code, we first passimportIntroduce markdown-it. Then in the Vue component, we create amdinstance, and userenderMethod converts Markdown text to HTML. Finally, we usev-htmlDirective renders HTML to the page.

Customized markdown-it

markdown-it also provides some configuration options and plugins that can help us customize the behavior of the Markdown parser. Here are some commonly used configuration options and plug-ins:

Configuration Options

• html: Whether to allow HTML tags in Markdown text, the default value isfalse。
• breaks: Whether to convert consecutive newlines to<br>Tag, default value isfalse。
• typographer: Whether to enable Typographer functions such as smart quotes and dashes, the default value isfalse。
• linkify: Whether to convert URL to link, the default value isfalse。
• highlight: Code highlighting function.

We can create amdinstance, and usesetMethods to set these configuration options:

<template>
  <div>
    <div v-html="html"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it';

export default {
  data() {
    return {
      markdown: 'Hello, **Vue Markdown**!',
      md: new MarkdownIt()
        .set({ html: true, breaks: true, typographer: true, linkify: true })
        .set({ highlight: (code, lang) => highlight(code, lang) })
    }
  },
  computed: {
    html() {
      return ();
    }
  }
}
</script>

In the above code, we first create an md instance and set some configuration options using the set method. Among them, the highlight option requires us to provide a code highlighting function, where we can use some third-party libraries to implement code highlighting, for example.

Plugin

markdown-it also supports some plugins that can help us extend the functionality of the Markdown parser. Here are some commonly used plugins:

• markdown-it-footnote: Support footnotes.
• markdown-it-task-lists: Supported task list.
• markdown-it-abbr: Support abbreviation.
• markdown-it-container: supports custom containers.

We can use these plugins in Vue components in the following ways:

<template>
  <div>
    <div v-html="html"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it';
import markdownItFootnote from 'markdown-it-footnote';
import markdownItTaskLists from 'markdown-it-task-lists';
import markdownItAbbr from 'markdown-it-abbr';
import markdownItContainer from 'markdown-it-container';

export default {
  data() {
    return {
      markdown: 'Hello, **Vue Markdown**!',
      md: new MarkdownIt()
        .use(markdownItFootnote)
        .use(markdownItTaskLists, { enabled: true })
        .use(markdownItAbbr)
        .use(markdownItContainer, 'warning')
    }
  },
  computed: {
    html() {
      return ();
    }
  }
}
</script>

In the above code, we introduce four plugins through the import statement: markdown-it-footnote, markdown-it-task-lists, markdown-it-abbr and markdown-it-container. Then in the component's data properties, we use the use method to register these plugins into the md instance.

Conclusion

In Vue projects, the use of Markdown documents is becoming more and more common, so it is becoming increasingly important to display and parse Markdown documents in Vue. This article introduces two third-party libraries: vue-markdown and markdown-it, which can help us present and parse Markdown documents. In addition, some configuration options and plug-ins are introduced to help us customize the behavior of the Markdown parser. Hope this article can be helpful to you!

The above is the detailed content of using Vue to display and parsing Markdown documents. For more information about display and parsing Vue Markdown, please pay attention to my other related articles!