【marked与katex结合】渲染公式

使用

如何在marked中展示LaTeX格式的公式：
$…$ 或者$$包裹的公式

环境准备

• 安装marked.js：npm install marked
• 安装katex来解析公式：npm install katex markded

实现代码示例

• 创建一个Vue组件用于展示Markdown内容
• 在组件中使用marked.js解析Markdown并渲染LaTeX公式

<template><div v-html="format(msg)"></div>
</template><script>
import marked from 'marked';
import 'katex/dist/katex.min.css';
import katex from 'katex';export default {data() {return {val: 'Here is some LaTeX: $E = mc^2$'};},methods: {format(val) {const html = this.renderMath(val); // 使用 KaTeX 渲染数学公式return marked(html, { gfm: true, breaks: true, smartLists: true });},renderMath(html) {// 先匹配 $$...$$ 的块级公式const blockMathRegex = /\$\$([\s\S]*?)\$\$/g;// 再匹配 $...$ 的行内公式（排除已经被 $$ 匹配的部分）const inlineMathRegex = /\$(?!\$)([\s\S]*?)\$(?!\$)/g;// 先处理块级公式html = html.replace(blockMathRegex, (match, math) => {try {return katex.renderToString(math.trim(), {throwOnError: false});} catch (e) {return match;}});// 再处理行内公式html = html.replace(inlineMathRegex, (match, math) => {try {return katex.renderToString(math.trim(), {throwOnError: false});} catch (e) {return match;}});return html;}}
};
</script>

最终呈现