vue3 初略版使用markdown
构造一个能够编写markdown且能解析数学公式，且有预览页面的markdown组件
第一步，katex用来解析数学公式，markded用来解析markdown语法
npm install katex markded
第二步 封装组件
<template><div class="markdown-container"><div style="flex: 50%"><textarea v-model="input" class="content" placeholder="输入 Markdown" /></div><div style="flex: 50%"><div v-html="renderedMarkdown" class="markdown-content"></div></div></div>
</template><script>
import { ref, watch } from 'vue';
import { marked } from 'marked';
import katex from 'katex';
import 'katex/dist/katex.min.css';export default {name: 'MarkdownEditor',setup() {const input = ref('');const renderedMarkdown = ref('');// 监听 input 的变化并渲染 Markdownwatch(input, (newInput) => {renderedMarkdown.value = renderMarkdown(newInput);});function renderMarkdown(markdown) {// 使用 marked 解析 Markdownconst html = marked(markdown, { breaks: true });// 使用 KaTeX 渲染数学公式return renderMath(html);}function renderMath(html) {// 使用正则表达式找到所有的数学公式并进行渲染const mathRegex = /\$([^$]+)\$/g;return html.replace(mathRegex, (match, math) => {try {// 尝试渲染数学公式return `<span class="math">${katex.renderToString(math)}</span>`;} catch (error) {// 捕获错误并返回错误信息return `<span class="math-error">Error rendering math: ${error.message}</span>`;}});}return {input,renderedMarkdown,};},
};
</script><style>
.markdown-container {display: flex;gap: 1rem;
}.content{width: 100%;height: 500px;
}.markdown-content {padding: 1rem;min-height: 30rem;border: 1px solid #ccc;background-color: #f9f9f9;
}
.math {font-size: 1rem; /* 可以根据需要调整数学公式的大小 */
}
/*解析数学公式报错时直接显示在预览页面的提示*/
.math-error {color: red;font-weight: bold;
}
</style>
