vue2中， 1 通过打字机的方式如何渲染markdown文档，并且代码高亮显示，

Question

vue2中，
1 通过打字机的方式如何渲染markdown文档，并且代码高亮显示，
2 渲染文档的时候，遇到代码片段要加上代码块操作栏
3 代码块操作栏要有滚动吸附的效果

以上功能vue2中可以用哪些技术实现，开发一个完整的vue组件

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

根据你的问题描述，以下是解决方案：

1. 通过打字机的方式渲染markdown文档，并且代码高亮显示

你可以使用以下组件来实现：

• marked：用于渲染markdown文档
• highlight.js：用于代码高亮显示
• vue-markdown：用于vue2中渲染markdown文档

示例代码：

<template>
  <div>
    <vue-markdown :source="markdownText" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
import marked from 'marked';
import hljs from 'highlight.js';

marked.setOptions({
  highlight: (code) => {
    return hljs.highlightAuto(code).value;
  },
});

export default {
  components: { VueMarkdown },
  data() {
    return {
      markdownText: '# Hello World!',
    };
  },
};
</script>

2. 渲染文档的时候，遇到代码片段要加上代码块操作栏

你可以使用以下组件来实现：

• vue-markdown：用于vue2中渲染markdown文档
• codemirror：用于代码块操作栏

示例代码：

<template>
  <div>
    <vue-markdown :source="markdownText" @render="renderCode" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
import CodeMirror from 'codemirror';

export default {
  components: { VueMarkdown },
  data() {
    return {
      markdownText: '# Hello World!',
    };
  },
  methods: {
    renderCode(node) {
      if (node.type === 'code') {
        const code = node.value;
        const cm = CodeMirror.fromTextArea(document.getElementById('code'), {
          mode: 'javascript',
          lineNumbers: true,
        });
        cm.setValue(code);
      }
    },
  },
};
</script>

3. 代码块操作栏要有滚动吸附的效果

你可以使用以下组件来实现：

• vue-scrollto：用于滚动吸附

示例代码：

<template>
  <div>
    <vue-markdown :source="markdownText" @render="renderCode" />
    <div id="code" style="position: fixed; bottom: 0; left: 0; width: 100%;"></div>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
import CodeMirror from 'codemirror';
import VueScrollTo from 'vue-scrollto';

export default {
  components: { VueMarkdown },
  data() {
    return {
      markdownText: '# Hello World!',
    };
  },
  methods: {
    renderCode(node) {
      if (node.type === 'code') {
        const code = node.value;
        const cm = CodeMirror.fromTextArea(document.getElementById('code'), {
          mode: 'javascript',
          lineNumbers: true,
        });
        cm.setValue(code);
        VueScrollTo.scrollTo('#code', 500);
      }
    },
  },
};
</script>

以上是解决方案，希望能帮助你实现所需功能。