如何在HTML中导入LaTeX文档？无需直接写入代码

HTML本身没有像LaTeX \input{} 那样的原生导入命令，但可以通过以下几种方式实现外部LaTeX内容的加载与渲染，避免手动复制代码到HTML文件：

1. JavaScript动态加载并渲染 #

用浏览器的Fetch API获取外部LaTeX文件内容，插入到HTML的指定元素后，通知MathJax重新渲染该区域。

步骤：

• 在HTML中预留渲染容器：

  <div id="latex-container"></div>
  

• 添加JavaScript代码加载并渲染：

  // 加载外部LaTeX文件
  fetch('path/to/your-content.ltx')
    .then(res => res.text())
    .then(latexCode => {
      // 将LaTeX代码插入容器
      const container = document.getElementById('latex-container');
      container.textContent = latexCode;
      // 通知MathJax重新渲染这个容器
      MathJax.typesetPromise([container]);
    });
  

• 注意：MathJax初始化时建议设置skipStartupTypeset: true，避免初始渲染空容器，示例配置：

  <script>
    MathJax = {
      tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
      skipStartupTypeset: true
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  

2. 使用MathJax 3的\load命令 #

MathJax 3内置了\load{}命令，可直接在公式环境中导入外部LaTeX片段，无需额外写JS。

步骤：

• 配置MathJax启用load扩展：

  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        packages: {'[+]': ['load']}
      },
      loader: {
        load: ['[tex]/load'],
        paths: {tex: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex'}
      }
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  

• 在HTML中使用\load导入：

  <!-- 导入整段LaTeX内容到块级公式环境 -->
  \[\load{path/to/your-snippet.ltx}\]
  
  <!-- 也可在 inline 环境中使用 -->
  这是一段包含\(\load{path/to/inline-snippet.ltx}\)的文本
  

• 注意：受浏览器跨域限制，外部LaTeX文件需与HTML页面同域，或服务器配置了CORS允许跨域访问。

3. 服务器端预插入（适合静态站点） #

如果用静态站点生成工具（如Jekyll、Hugo），可以在构建阶段直接将外部LaTeX文件内容插入到HTML中，生成的HTML已包含LaTeX代码，MathJax可直接渲染。

示例（Jekyll）：

<!-- 在HTML模板中插入外部LaTeX文件内容 -->
<div class="latex-content">
  {% include your-latex-file.ltx %}
</div>

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