说明

Vue Markdown 组件，可以将本地或远程 .md 文件以及 markdown 字符串解析为 HTML 显示

Introduce

Vue Markdown component, parse local or remote .md files and markdown strings into HTML display

演示项目

• 地址：qing-markdown 演示项目

• 本地运行

# 下载项目代码
clone https://github.com/qinkaiyuan/qing-markdown.git
# 切换到演示项目
cd qing-markdown/exampl
# 安装演示项目
npm install
# 运行演示项目
npm run serve

安装

• 推荐，vue-cli 方式，已自动配置 webpack loader

vue add qing-markdown

• npm 方式，需手动配置 webpack loader

npm install qing-markdown

快速上手

<template>
    <!--// 编译为 <h1>hello world<h1>-->
    <q-markdown :text="hello"/>
</template>

// 引入组件
import QMarkdown from 'qing-markdown'

@Component({
    components: {QMarkdown}
})
export default class HelloWorld extends Vue {
    hello = '# hello world'
}

• 结合以下三种不同的 js 代码实现本地、远程、字符串三种不同的 .md 加载方式

1. 加载 markdown 字符串

   // helloString = '# hello world'
   import helloString from './helloString'
    
   export default class HelloWorld extends Vue {
      hello = helloString
   }

2. 本地 .md 文件

   // hello.md文件内内容为：# hello world
   // 所以 hello = '# hello world' 
   import hello from './hello.md'
      
   export default class HelloWorld extends Vue {
      hello = hello
   }

• 非 vue-cli 方式安装，需要配置 qing-markdown-loader，否则无法加载 .md 文件，查看方式

3. 远程文件

   export default class HelloWorld extends Vue {
      hello = ''
      created() {
        axios.get('https://www.*.com/markdown/hello.md').then(res => {
          // this.hello = '# hello world' markdown文件内内容
          this.hello = res.data
        })
      }
   }

注意

非 vue-cli 安装，读取本地 .md 文件方式，需要配置 loader，使webpack支持 .md 文件，vue-cli 方式

# 安装 loader
npm install qing-markdown-loader

# 配置 loader，vue.config.js 文件
chainWebpack: config => {
  config.module
    .rule('md').test(/\.md$/).use('qing-markdown-loader').loader('qing-markdown-loader')
}

关联项目介绍

• qing-markdown-loader Webpack loader，加载 .md 文件，并返回文件内内容字符串， 以实现使 webpack 可加载 .md 文件的功能，qing-markdown 使用这个项目实现加载 .md 文件功能

• vue-cli-plugin-qing-markdown qing-markdown 的 vue-cli 插件

基于项目，感谢

• marked A markdown parser and compiler. Built for speed.

• Highlight.js Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection.

• github-markdown-css The minimal amount of CSS to replicate the GitHub Markdown style

License

MIT