山河浪漫，
人间温暖。

效果图：

dabAhSOhwk.gif

vue 中显示 markdown 文件:

在操作的过程可能会报错
./README.md Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type.
原因是不识别这中格式，markdown 中的 ‘#’ 号，安装 markdown-loader html-loader

npm i markdown-loader html-loader --save

vue-cli2.0版本中配置
webpack.base.conf.js 中添加 rules 规则
{ test: /\.md$/, use: [ { loader: 'html-loader' }, { loader: 'markdown-loader', options: {} } ] }

vue-cli3.0版本中配置
vue.config.js 中添加 rules 规则
chainWebpack(config) { config.module.rule('html').test(/\.md$/).use('html-loader').loader('html-loader').end() config.module.rule('markdown').test(/\.md$/).use('markdown-loader').loader('markdown-loader').end() },

<template>
  <div class="codeContent">
    <div v-html="MarkdownMsg"></div>
  </div>
</template>

<script>
import README from '../README.md'
import marked from 'marked'
export default {
  data() {
    return {
      MarkdownMsg: ''
    }
  },
  mounted() {
    this.getMardownFileContent(README)
  },
  methods: {
    //处理markdown数据，data为markdown文件读出的字符串
    getMardownFileContent(data) {
      this.MarkdownMsg = marked(data || '', {
        /* 默认为false，为true时显示代码标签 */
        sanitize: false
      })
    }
  }
}
</script>

<style lang="scss" >
.codeContent {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 25vh;
}
/* 因为默认的代码块没有样式，所以添加一个背景色 */
pre {
  background-color: #282c34;
  color: white;
  padding: 25px 20px;
  margin: 10px 0;
  text-align: left;
  border-radius: 3px;
  position: relative;
}
pre:hover .copy-btn {
  opacity: 1;
}
</style>

复制功能实现思路：

因为在 markdown中，代码块几乎都是被pre标签包裹，所以这里当数据更新时，遍历所有代码块，并把对应的 复制 添加到每个代码块中。
这里用到了 Vue.extend 和 $mount 挂载，以便于将复制模块组件渲染挂载到每个pre标签中去。
不太理解 Vue.extend和$mount 的，可以参考 此篇文章。

image.png

所以这里单独针对 复制功能封装了一个组件
CodeCopy.vue:

<template>
  <div class="copy-content">
    <!-- 复制按钮 -->
    <div
      class="copy-btn code-data-copy"
      @click="copyMessage"
      data-clipboard-action="copy"
      :data-clipboard-text="code"
    >
      <svg
        t="1609826359524"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2955"
      >
        <path
          d="M770.63802083 933.875H216.92708332c-44.82421875 0-79.1015625-34.27734375-79.10156249-79.1015625V195.59374999h553.7109375c44.82421875 0 79.1015625 34.27734375 79.1015625 79.10156251v659.1796875zM190.55989583 248.328125v606.4453125c0 15.8203125 10.546875 26.3671875 26.36718751 26.3671875h500.97656249V274.6953125c0-15.8203125-10.546875-26.3671875-26.3671875-26.3671875H190.55989583z"
          p-id="2956"
        />
        <path
          d="M612.43489583 424.98828125H296.02864583c-13.18359375 0-26.3671875-10.546875-26.3671875-26.3671875 0-13.18359375 10.546875-26.3671875 26.3671875-26.3671875h316.40625c13.18359375 0 26.3671875 10.546875 26.36718751 26.3671875 0 13.18359375-13.18359375 26.3671875-26.36718751 26.3671875z m0 131.8359375H296.02864583c-13.18359375 0-26.3671875-10.546875-26.3671875-26.3671875 0-13.18359375 10.546875-26.3671875 26.3671875-26.3671875h316.40625c13.18359375 0 26.3671875 10.546875 26.36718751 26.3671875 0 13.18359375-13.18359375 26.3671875-26.36718751 26.3671875z m0 131.8359375H296.02864583c-13.18359375 0-26.3671875-10.546875-26.3671875-26.3671875 0-13.18359375 10.546875-26.3671875 26.3671875-26.3671875h316.40625c13.18359375 0 26.3671875 10.546875 26.36718751 26.3671875 0 13.18359375-13.18359375 26.3671875-26.36718751 26.3671875z"
          p-id="2957"
        />
        <path
          d="M828.64583333 90.125h-527.34375001c-15.8203125 0-26.3671875 10.546875-26.36718749 26.3671875s10.546875 26.3671875 26.36718751 26.3671875h527.34374999c15.8203125 0 26.3671875 10.546875 26.3671875 26.3671875v606.4453125H823.37239583v52.73437499h84.375V169.2265625c0-44.82421875-36.9140625-79.1015625-79.1015625-79.1015625z"
          p-id="2958"
        />
        <path
          d="M797.00520833 802.0390625a26.3671875 26.3671875 0 1 0 52.73437501 0 26.3671875 26.3671875 0 1 0-52.73437501 0z"
          p-id="2959"
        />
      </svg>
    </div>
    <div v-if="success" class="copy-success-text">复制成功!</div>
  </div>
</template>

<script>
import clipboard from 'clipboard' //复制插件
export default {
  data() {
    return {
      code: null,
      success: false
    }
  },
  methods: {
    copyMessage(value) {
      let _this = this
      _this.success = false
      let clipboard = new this.clipboard('.code-data-copy')
      clipboard.on('success', function(e) {
        console.log('复制成功')
        _this.success = true
        // setTimeout(() => {
        //   _this.success = false
        // }, 300)
        clipboard.destroy() // 销毁,避免多次点击重复出现
      })
      clipboard.on('error', function() {
        console.log('复制失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.copy-content {
  height: 0;
}
.icon {
  width: 0.8rem;
  height: 0.8rem;
  fill: white;
}
.copy-btn {
  user-select: none;
  opacity: 0;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.2);
  &:active {
    background: rgba(253, 253, 253, 0.575);
  }
}
.copy-success-text {
  color: white;
  position: absolute;
  font-size: 12px;
  top: 8px;
  right: 2.5rem;
  font-weight: 200;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  animation: successCopy 0.5s ease both 1;
}
@keyframes successCopy {
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
</style>

使用页面：

<template>
  <div class="codeContent">
    <div v-html="MarkdownMsg"></div>
    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
  </div>
</template>

<script>
import README from '../README.md'
import marked from 'marked'
import CodeCopy from '../common/CodeCopy'
import Vue from 'vue'
export default {
  data() {
    return {
      MarkdownMsg: '',
      textarea:''
    }
  },
  updated() {
    this.update()
  },
  mounted() {
    this.getMardownFileContent(README)
  },
  methods: {
    //处理markdown数据，data为markdown文件读出的字符串
    getMardownFileContent(data) {
      this.MarkdownMsg = marked(data || '', {
        /* 默认为false，为true时显示代码标签 */
        sanitize: false
      })
    },
    //获取对应markdown代码块标签
    update() {
      setTimeout(() => {
        document.querySelectorAll('pre').forEach(el => {
          //   console.log(el)
          if (el.classList.contains('code-copy-added')) return
          //   https://cn.vuejs.org/v2/api/index.html#Vue-extend
          /* 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 */
          let ComponentClass = Vue.extend(CodeCopy)
          let instance = new ComponentClass()
          instance.code = el.innerText
          instance.parent = el
          /* 手动挂载 */
          instance.$mount()
          el.classList.add('code-copy-added')
          el.appendChild(instance.$el)
        })
      }, 100)
    }
  }
}
</script>

<style lang="scss" >
.codeContent {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 25vh;
}
.code-copy-added {
  background-color: #282c34;
  color: white;
  padding: 25px 20px;
  margin: 10px 0;
  text-align: left;
  border-radius: 3px;
  position: relative;
}
.code-copy-added:hover .copy-btn {
  opacity: 1;
}
</style>

原文链接：https://www.jianshu.com/p/bebc77f6a826