当前位置：首页 > news >正文

TeXMe终极指南：如何创建自渲染的Markdown + LaTeX文档

news 2026/7/22 18:46:58

TeXMe终极指南：如何创建自渲染的Markdown + LaTeX文档

【免费下载链接】texmeSelf-rendering Markdown + LaTeX documents项目地址: https://gitcode.com/gh_mirrors/te/texme

TeXMe是一款强大的自渲染工具，能让你轻松创建包含Markdown和LaTeX数学公式的文档。无需复杂配置，只需引入一个JavaScript文件，即可在浏览器中实时渲染精美的学术文档。

🚀 快速开始：5分钟上手TeXMe

一键安装步骤

获取项目文件
首先克隆仓库到本地：
git clone https://gitcode.com/gh_mirrors/te/texme

创建基础文档
在项目目录下新建HTML文件，复制以下代码：

<!DOCTYPE html> <script src="texme.js"></script> <textarea> # 我的第一篇TeXMe文档 这是一个包含数学公式的示例：$E=mc^2$ ## 欧拉恒等式 $$ e^{i \pi} + 1 = 0 $$ </textarea>

直接在浏览器打开
双击HTML文件，即可看到渲染后的效果！无需服务器，完全本地运行。

✨ 核心功能解析

自渲染机制：告别复杂编译流程

TeXMe的核心优势在于无需预编译。通过<script src="texme.js"></script>引入后，它会自动处理：

Markdown语法转换（标题、列表、粗体等）
LaTeX数学公式渲染（支持行内公式 $...$ 和块级公式$$...$$）
代码高亮与样式美化

查看示例源码：examples/get-started.html

自定义配置：打造个性化文档

通过全局变量window.texme调整渲染行为：

<script> window.texme = { style: 'plain', // 可选：'plain' | 'custom' mathjax: { // MathJax配置 tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] } } } </script> <script src="texme.js"></script>

完整配置示例：examples/set-options.html

🎯 实用场景指南

学术论文写作

TeXMe完美支持复杂数学公式，例如傅里叶变换： $$ \mathcal{F}{f(t)} = F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-i\omega t} dt $$

查看数学公式渲染示例：examples/mathjax.html

交互式文档演示

利用TeXMe的API创建实时编辑环境：

// 调用内置渲染函数 const html = texme.render(markdownText) document.getElementById('preview').innerHTML = html

交互式演示示例：examples/interactive-demo.html

🛠️ 高级技巧

代码保护模式

对于不需要渲染的代码块，使用texme-code-protected类：

<script src="texme.js"></script> <div class="texme-code-protected"> 这里的内容不会被TeXMe处理 </div>

保护模式示例：examples/texme-code-protected.html

样式定制

通过CSS覆盖默认样式：

<style> /* 自定义标题样式 */ .texme h1 { color: #2c3e50; border-bottom: 2px solid #3498db; } /* 调整公式字体大小 */ .texme .MathJax { font-size: 1.1em !important; } </style>

样式定制示例：examples/style-custom.html