uniapp vue3 小程序中使用marked解析markdown 并添加打字机效果

<template>
  <view class="markdown-container">
    <view class="markdown-content" v-html="parsedMarkdown"></view>
  </view>
</template>
 
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import marked from 'marked';
import hljs from 'highlight.js';
 
const props = defineProps<{
  content: string;
}>();
 
const parsedMarkdown = ref('');
 
onMounted(() => {
  // 使用 marked 库解析 Markdown 内容
  parsedMarkdown.value = marked(props.content, {
    gfm: true,
    highlight: function(code, language) {
      const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
      return hljs.highlight(code, { language: validLanguage }).value;
    },
  });
 
  // 添加打字机效果
  const markdownElements = document.querySelectorAll('.markdown-content p');
  const typeText = (element: HTMLElement, index: number) => {
    const text = element.innerText;
    const speed = 75; // 打字速度
    if (text.length > 0) {
      element.innerText = '';
      let charIndex = 0;
      const writeText = setInterval(() => {
        if (charIndex < text.length) {
          element.innerText += text.charAt(charIndex);
          charIndex++;
        } else {
          clearInterval(writeText);
        }
      }, speed);
    }
  };
 
  markdownElements.forEach((element, index) => {
    setTimeout(() => {
      typeText(element, index);
    }, index * 1000); // 每个元素延迟1秒显示
  });
});
</script>
 
<style scoped>
.markdown-container {
  padding: 20px;
}
.markdown-content {
  font-size: 16px;
}
/* 其他样式按需添加 */
</style>

这段代码使用了marked库来解析Markdown内容，并通过highlight.js来实现代码高亮。同时，在onMounted钩子中使用了DOM操作来实现打字机效果。这个例子展示了如何在uniapp vue3小程序中使用Markdown，并添加动态内容显示。