preface

When VUePress first came out, I thought it was an open source project worth pursuing. Sure enough, I benefited a lot from the many front-end programming tips.

So on weekends like this, people chase after dramas and I chase codes.

Today, I’m going to share with you how VuePress uses Vue syntax in Markdown.

The principle of

As we all know, Markdown is a markup language, similar to HTML, with its corresponding syntax and morphology. The point is that both Markdown and Vue code can be interpreted as HTML.

The smart reader should be wondering: is it possible to use Vue syntax in Markdown by adding an intermediate process to convert Vue to Markdown or Markdown to Vue?

Let’s consider the implementation difficulties of the two schemes again:

  1. Vue -> Markdown: The template and style parts are fine, but what about the js part?
  2. Markdown -> Vue: Markdown code can be interpreted as HTML or JS and mixed into Vue code.

Obviously, the second option is more likely to be implemented, so This is what Yu Creek chose:

The Webpack loader is very good at translating between grammars. Therefore, Vuepress defines a markdownLoader to convert Markdown into Vue, and then vue-loader to get the final HTML.

Code implementation

markdownLoader

This is a custom loader, can refer to how to write a loader?

  1. The loader receives a parameter containing an instance of markdown-it, which the author uses to interpret markdown as HTML.
  2. Wrap the HTML around the template tag and return.
`<template>\n` +
    `<div class="markdown">${html}</div>\n` +
`</template>\n`
Copy the code

There are really only two steps in the process. Of course, vuepress also does a lot of other things in markdownLoader, such as parsing yaml front matter, inferring titles, and getting promoted style, script, and other tags in markdown.

Implement a demo yourself

Next, you can implement a basic demo with me. The full code can be seen on Github.

  1. Create a new Vue project

We use vue-CLI (v2.9.6) to create a new project:

  1. Write markdownLoader
  • 2.1 introduction of markdown – it 
    npm install markdown-it --save
Copy the code
  • 2.2 Creating a markdownLoader File 
    const markdown = require('markdown-it')

module.exports = function(src) {
  const html = markdown().render(src)
  return (
    `<template>\n` +
    	`<div class="markdown">${html}</div>\n` +
    `</template>\n`
  )
}
Copy the code
  • 2.3 Add markdownLoader in the Module Rules configuration of Webpack 
    {
  test: /\.md$/,
  use: [
    { loader: 'vue-loader' },
    {
      loader: require.resolve('./markdownLoader')
    }
  ]
}
Copy the code
  1. Use markdown files in Vue files
  • 3.1 Create a markdown.md file in SRC/Components
I am a markdown {{1+2}}Copy the code
  • 3.2 Importing MarkDown in SRC/Router /index
 const Markdown = () => import('@/components/markdown.md')
Copy the code
  • 3.3 Add this component to the route
{
  path: '/md',
  name: 'Markdown',
  component: Markdown
}
Copy the code

Use React(JSX) syntax in Markdown

Since it is possible to write vue in markDown, it is theoretically possible to write React in MarkDonw: make markdownLoader return a React component and use babel-loader to convert it to JS.

This time we’ll convert MarkDown to JSX and wrap it in a React component:

return ( `import React from 'react'; ${registerComponent} function R() { return ( <div> <div className="markdown">${html}</div> </div>) } export default R; \n` )Copy the code

Interested readers can implement the full markdownLoader code for the React version themselves.

conclusion

The demo implemented in this article only implemented the key steps of markdownLoader, but there are still many problems to be solved, such as browser API access restrictions, code blocks and highlighting, etc., which are not covered in this article.

This series will also cover WebPack extensions, Markdown-IT extensions, unit testing, plug-in systems, and more. If you liked this article, don’t forget to give it a thumbs up