如何将含Markdown+LaTeX的textarea内容转为HTML？

核心思路 #

先通过Showdown将Markdown转为HTML，再调用MathJax v3渲染其中的LaTeX公式，关键是确保Showdown不干扰MathJax的公式分隔符（$/$$），同时正确配置MathJax识别这些分隔符。

完整实现代码 #

HTML结构

<textarea id="inputArea" rows="10" cols="80">试输入示例：
这是行内公式 $E=mc^2$，这是块级公式：
$$\int_0^\infty e^{-x} dx = 1$$

再试试Markdown格式：
# 标题1
- 列表项1
- 列表项2（带公式：$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$）
</textarea>
<div id="outputArea" style="padding: 1rem; border: 1px solid #eee; margin-top: 1rem;"></div>

引入依赖

<!-- Showdown -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
<!-- MathJax v3 -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

JavaScript逻辑

// 1. 配置MathJax，指定公式分隔符
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式用 $...$
    displayMath: [['$$', '$$'], ['\\[', '\\]']] // 块级公式用 $$...$$
  },
  chtml: {
    matchFontHeight: false // 避免公式与文字高度不一致
  }
};

// 2. 初始化Showdown转换器，禁用可能干扰$的选项
const converter = new showdown.Converter({
  smartypants: false, // 禁用智能标点转换，防止$被误处理
  backslashEscapesHTMLTags: true, // 确保反斜杠仅转义HTML标签，不影响LaTeX
  simplifiedAutoLink: true // 可选：优化链接解析
});

// 可选：添加自定义扩展，强制保留$符号（防止极端情况Showdown转义$）
const mathPreserveExtension = {
  type: 'lang',
  regex: /(\$+[^$]+\$+)/g,
  replace: (match) => match
};
converter.addExtension(mathPreserveExtension);

// 3. 监听输入并实时渲染
const inputArea = document.getElementById('inputArea');
const outputArea = document.getElementById('outputArea');

inputArea.addEventListener('input', async () => {
  // 第一步：Markdown转HTML
  const html = converter.makeHtml(inputArea.value);
  outputArea.innerHTML = html;
  
  // 第二步：调用MathJax渲染公式
  try {
    await MathJax.typesetPromise([outputArea]);
  } catch (err) {
    console.error('MathJax渲染失败:', err);
  }
});

// 初始渲染一次
inputArea.dispatchEvent(new Event('input'));

关键注意事项 #

• Showdown配置：必须禁用smartypants，否则它会将$转换为其他符号，导致MathJax无法识别公式。
• MathJax异步渲染：使用typesetPromise()而非旧版的typeset()，确保渲染完成后再处理后续操作，避免渲染不完整。
• 范围控制：调用typesetPromise([outputArea])仅渲染输出区域，比全局渲染更高效。

内容的提问来源于stack exchange，提问作者Jojo197