前端Markdown语法转译工具

• 需要的依赖
  highlight代码块高亮显示，katex数学公式渲染

cnpm install github-markdown-css --save
cnpm install highlight.js --save
cnpm install vue-markdown --save
cnpm install katex --save

• 在main.js中注册

import 'github-markdown-css/github-markdown.css'
import hljs from "highlight.js";
Vue.prototype.$hljs = hljs;
// 有多种样式可选，也可以到对应文件中定制化
import "highlight.js/styles/atom-one-dark.css";
// 自定义命令v-highlight
Vue.directive("highlight", function (el) {
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach(block => {
    hljs.highlightBlock(block);
  });
});

• 在组件中使用

<template>
  <div class="markdown-body">
    <vue-markdown
      ref="vuemarkdown"
      v-highlight
      :source="answer"
      :options="options"
    ></vue-markdown>
  </div>
</template>
<script>
import VueMarkdown from "vue-markdown";
import CodeCopy from "./CodeCopy.vue";//代码块复制按钮
import "katex/dist/katex.min.css";
import katex from "katex";
export default{
  components: {
    VueMarkdown,
  },
  data(){
    answer:"以下是一个简单的猜数字游戏的Python代码：\n\n```python\nimport random\n\n# 生成随机数\nnumber = random.randint(1, 100)\n\n# 初始化猜测次数\nguesses = 0\n\n# 循环猜测\nwhile True:\n    # 获取用户输入\n    guess = int(input(\"猜一个1到100之间的数字：\"))\n    guesses += 1\n    \n    # 判断猜测是否正确\n    if guess == number:\n        print(\"恭喜你，猜对了！你猜了\", guesses, \"次。\")\n        break\n    elif guess < number:\n        print(\"猜的数字太小了，再试试。\")\n    else:\n        print(\"猜的数字太大了，再试试。\")\n```\n\n运行这个程序，你将看到类似以下的输出：\n\n```\n猜一个1到100之间的数字：50\n猜的数字太小了，再试试。\n猜一个1到100之间的数字：75\n猜的数字太大了，再试试。\n猜一个1到100之间的数字：63\n猜的数字太大了，再试试。\n猜一个1到100之间的数字：56\n猜的数字太小了，再试试。\n猜一个1到100之间的数字：60\n恭喜你，猜对了！你猜了 5 次。\n```",
    timer:"",
  },
  computed:{
    options() {
      return {
        // 配置KaTeX
        render: {
          math: (content) => this.renderMathjax(content, { displayMode: true }),
          inlineMath: (content) =>
            this.renderMathjax(content, { displayMode: false }),
        },
      };
    },
  },
  mounted(){
    var markdownText=this.answer;
    let speed = 50; //定时的速度
    let count = 1;
    this.changeContent(markdownText, speed, count);
  },
  methods:{
    renderMathjax(content, option) {
      try {
        return katex.renderToString(content, option);
      } catch (error) {
        if (!(error instanceof katex.ParseError)) {
          throw error;
        }
        console.error(`KaTeX error: ${error}`);
        return content;
      }
    },
    // 给每一个 pre  加上复制按钮，具体样式可以自己调整
    update() {
      setTimeout(() => {
        document.querySelectorAll("pre").forEach((el) => {
          //   console.log(el)
          if (el.classList.contains("code-copy-added")) return;
          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);
    },
    // 逐字显示动画
    changeContent(text, speed, count) {
      var num = count;
      this.answer = text.substring(0, num) + "|";
      this.scrollTopEnd();
      this.$nextTick(() => {
        let codeBlocks = document.querySelectorAll("pre code");
        for (let i = 0; i < codeBlocks.length; i++) {
          this.$hljs.highlightBlock(codeBlocks[i]);
        }
      });
      num++;
      if (num < text.length + 1) {
        this.timer = setTimeout(() => {
          this.changeContent(text, speed, num);
        }, speed);
      } else {
        this.answer = text.substring(0, num);
        this.$nextTick(() => {
          this.update();
        });
      }
    },
    // 代码复制
    copyButtonClick(text) {
      navigator.clipboard.writeText(text);
      setTimeout(() => {
        this.$message.success("复制成功");
      }, 500);
    },
    // 滚动条默认在最底部
    scrollTopEnd() {
      this.$refs.chat_content.scrollTop = this.$refs.chat_content.scrollHeight;
    },
  }
}
</script>

• CodeCopy.vue组件

//CodeCopy.vue
<template>
  <div class="copy-content">
    <!-- 复制按钮 -->
    <div
      class="copy-btn code-data-copy"
      @click="copyMessage"
      data-clipboard-action="copy"
      :data-clipboard-text="code"
    >
      <i class="el-icon-document-copy myicon"></i>
    </div>
    <div v-if="success" class="copy-success-text">copied!</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) {
        //    this.$message.error("提問不能為空");
        _this.success = true;
        // setTimeout(() => {
        //   _this.success = false
        // }, 300)
        clipboard.destroy(); // 销毁,避免多次点击重复出现
      });
      clipboard.on("error", function () {
        _this.$message.error("複製失敗");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.copy-content {
  height: 0px;
}
.icon {
  width: 0.8rem;
  height: 0.8rem;
  fill: rgb(231, 32, 32);
}
.myicon {
  font-size: 14px;
  color: #c0c4cc;
  &:hover {
    color: black;
  }
}
.copy-btn {
  user-select: none;
  opacity: 1;
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  border-radius: 3px;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.2);
  &:active {
    background: rgba(253, 253, 253, 0.575);
  }
}
.copy-success-text {
  font-family: "微软雅黑";
  color: green;
  position: absolute;
  font-size: 12px;
  top: 2px;
  right: 18px;
  font-weight: 500;
  animation: successCopy 0.6s ease both 1;
}
</style>