<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，并添加动态内容显示。