Vue- Markdown 使用大全

古城微笑少年丶 2022-10-29 09:20 600阅读 0赞

### 文章目录 ###

*  1. MarkDown 解析器
 *   *  1.1 使用md格式文件解析 md->html
     *  1.2 字符串解析方案
     *   *  marked 方案
         *   *  1、安装marked
             *  2、使用
         *  
         *  vue-markdown 方案
         *   *  使用
     *  1.3 Markdown 优化方案
     *   *  1. markdown 样式方案-github-markdown-css
         *  2. 代码高亮方案-highlight.js
         *   *  1) 安装
             *  2) 编码
             *  3) 使用
             *  4) 封装成插件
             *   *  编写插件
                 *  使用插件
         *  3. 代码行数显示方案-highlightjs-line-numbers.js
 *  2. Markdown 编辑器-mavonEditor
 *   *  安装
     *  使用 Vue
 *  3. 富文本编辑器解析-vue-quill-editor

# 1. MarkDown 解析器 #

## 1.1 使用md格式文件解析 md->html ##

vue-cli3 中直接将 `.md` 文件转为 html。我用到的是 webpack 的 [vue-markdown-loader][]，这个 loader 可以直接将 `.md` 文件转换为 vue 的组件，然后可以直接在页面中使用，非常的方便。

安装

npm i vue-markdown-loader -D
    npm i  vue-loader vue-template-compiler -D
    # 样式
    npm i github-markdown-css -D
    npm i highlight.js -D

配置

// vue.config.js 如果没有就在项目根目录新建
    module.exports = {
      chainWebpack: config => {
        config.module.rule('md')
          .test(/\.md/)
          .use('vue-loader')
          .loader('vue-loader')
          .end()
          .use('vue-markdown-loader')
          .loader('vue-markdown-loader/lib/markdown-compiler')
          .options({
            raw: true
          })
      }
    }

使用

<template>
    	
      <div class="markdown-body">
        <markdown />
      </div>
    </template>
    
    <script>
    // 引入 markdown 文件，引入后是一个组件，需要在 components 中注册
    import markdown from '@/assets/ApiDocument.md'
    // 代码高亮
    import 'highlight.js/styles/github.css'
    // 其他元素使用 github 的样式
    import 'github-markdown-css'
    export default {
      components: {
        markdown
      },
    }
    </script>

## 1.2 字符串解析方案 ##

### marked 方案 ###

#### 1、安装marked ####

npm install marked

#### 2、使用 ####

<div v-html="readmeContent">
     
    </div>
     
    <script>
      //引入marked
      import marked from 'marked'
      
      export default { 
        methods: { 
          getMardownFileContent(data) { 
    		//处理markdown数据，data为markdown文件读出的字符串
    		this.readmeContent = marked(data || '', { 
    		  sanitize: true
    		}); 
        },
      }
      
    </script>

###  ###

### vue-markdown 方案 ###

npm install vue-loader vue-template-compiler -D
    npm install --save vue-markdown

#### 使用 ####

import VueMarkdown from 'vue-markdown'
    export default { 
      components: { 
        VueMarkdown // 注入组件
      },
      data () { 
        return {  
          value: "### sdsa" // value的值是要解析的markdown数据
        }
      }
    }

使用注入的组件

## 1.3 Markdown 优化方案 ##

### 1. markdown 样式方案-github-markdown-css ###

### 2. 代码高亮方案-highlight.js ###

#### 1) 安装 ####

npm install highlight.js

#### 2) 编码 ####

[Vue自定义指令 文档][Vue_]

// Vue-cli生成的工程文件的src/main.js
    import hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css' //样式文件
    Vue.directive('highlight',function (el) {
      let blocks = el.querySelectorAll('pre code');
      blocks.forEach((block)=>{
        hljs.highlightBlock(block)
      })
    })

#### 3) 使用 ####

到这里我们就打工告成了。

#### 4) 封装成插件 ####

##### 编写插件 #####

// highlight.js
    import Vue from 'vue'
    import Hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css'
    let Highlight = {}
    Highlight.install = function (Vue, options) {
      Vue.directive('highlight', function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block) => {
          Hljs.highlightBlock(block)
        })
      })
    }
    export default Highlight

##### 使用插件 #####

import Highlight from 'path/to/Highlight.js'
    Vue.use(Highlight)

### 3. 代码行数显示方案-highlightjs-line-numbers.js ###

# 2. Markdown 编辑器-mavonEditor #

官网

https://github.com/hinesboy/mavonEditor

## 安装 ##

npm install mavon-editor --save

## 使用 Vue ##

import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
        // use
    Vue.use(mavonEditor)

# 3. 富文本编辑器解析-vue-quill-editor #

官网