texme

TeXMe 是一个轻量级的 JavaScript 实用程序，用于创建自渲染 Markdown + LaTeX 文档。

开始

将以下代码复制并粘贴到以 .html 作为扩展名的 HTML 文件中：

<!DOCTYPE html><script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script><textarea>

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

该文件包含一行 HTML 代码，后跟 Markdown + LaTeX 内容。

使用 Web 浏览器打开此 HTML 文件。它使自己看起来像这样：get-started.html。

这是输出的屏幕截图：

out

使用 TeXMe 时要记住三个简单的规则：

在将内容呈现为 HTML 之前，TeXMe 会删除内容中的任何前导和尾随空格。
如果未指定显式 <title> 元素，则 TeXMe 使用内容的第一个非空行来设置页面标题。设置页面标题时，将删除任何前导和尾随空格和哈希 (#) 字符。
如果存在 Markdown 元素，例如代码跨度/块或带有 LaTeX 分隔符的图像（例如，$、$$ 等），TeXMe 可能会将其解释为 LaTeX，这可能会导致文档呈现不正确。为了防止这个问题，把这样的 Markdown 元素放在 TeXMe 支持的特殊用途的 md 环境中，例如，\begin{md}echo $foo\end{md}。如果你没有这样的带有 LaTeX 分隔符的 Markdown 元素，你可以忽略这个规则。请参阅 Markdown Priority Environment 部分以查看有关此的更多详细信息。注意：对于大多数文档，您不必担心这一点。

如果您不喜欢以 HTML 标签开始您的文档，您可以先编写您的内容并在最后添加 <script> 标签，但这种方法有一些限制。有关它的更多详细信息，请参阅正文部分的内容。

CDN 网址

在 <script> 标签中使用以下 URL 来加载 TeXMe 的 1.0.0 版（此时的当前版本）：

https://cdn.jsdelivr.net/npm/texme@1.0.0

在 <script> 标签中使用以下 URL 以始终加载最新版本的 TeXMe：

https://cdn.jsdelivr.net/npm/texme

如果您需要一些非常容易记住的东西，请使用此 URL 加载最新版本的 TeXMe：

https://unpkg.com/texme

有效的 HTML5

前面的入门部分展示了我们如何使用一行 HTML 代码创建自渲染文档，但这种简洁是以符合标准为代价的。

例如，代码中缺少所需的 <title> 元素。此外 <textarea> 元素没有关闭。

为了完整性和正确性，这里是一个最小但完整且有效的 HTML5 示例：

<!DOCTYPE html>
<html lang="en">
<title>Notes on Euler's Identity</title>
<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script>
<textarea>

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

</textarea>

这是输出：valid-html5.html。

它还有几行代码以确保此 HTML5 代码在 validator.w3.org 上成功验证。

因此，此示例看起来不像上一节中的示例那么简洁。

如果您想知道，有效的 HTML5 文档不需要显式的 <head>、<body> 或结束 </html> 标记，因此为了简洁起见，它们已被省略，同时保持完整性和正确性。

但在实践中，没有必要像这样编写冗长的代码。所有浏览器都遵循健壮性原则，因此它们可以很好地呈现入门部分中较短的示例。

在网页中使用 TeXMe

风格

默认情况下，TeXMe 在灰色背景的白色窗格上呈现文档。

这是由于名为 style 的配置选项默认设置为 viewer。

要在完全纯白色的背景上以最小样式呈现文档，请将样式配置选项设置为 plain。

下面是一个例子：

<!DOCTYPE html>
<script>window.texme = { style: 'plain' }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script><textarea>

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

这是输出：style-plain.html。

要呈现完全没有样式的文档，请将样式设置为“无”。 ‘none’ 样式选项可用于在使用常规 CSS 代码定义自定义样式之前禁用 TeXMe 设置的默认“查看器”样式。

下面是一个例子：

<!DOCTYPE html>
<script>window.texme = { style: 'none' }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script>
<style>
body {
  background: lightcyan;
}
main {
  max-width: 20em;
  padding: 1em;
  border: medium double gray;
  margin: 2em auto;
  background: lightyellow;
}
</style>
<textarea>

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

这是输出：style-custom.html。

请注意，渲染的内容显示在 <body> 内的 <main> 元素中。

这就是为什么在上面的示例中对这些元素进行样式设置的原因。

在没有 MathJax 的情况下渲染 Markdown

要呈现完全没有任何数学内容的 Markdown 内容，请将 useMathJax 和protectMath 选项设置为false：

<!DOCTYPE html>
<script>window.texme = { useMathJax: false, protectMath: false }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script><textarea>

# Atomic Theory

**Atomic theory** is a scientific theory of the nature of matter, which
states that matter is composed of discrete units called *atoms*. It
began as a philosophical concept in ancient Greece and entered the
scientific mainstream in the early 19th century when discoveries in the
field of chemistry showed that matter did indeed behave as if it were
made up of atoms.

这是输出：markdown-only.html。

在加载时跳过自动渲染

当 TeXMe 加载时，它开始自动渲染文档。可以通过将 renderOnLoad 选项设置为 false 来跳过此自动渲染。

这是一个示例，它禁用自动渲染，然后使用 TeXMe API 中的 texme.renderPage() 函数在单击按钮时调用渲染：

<!DOCTYPE html>
<script>window.texme = { renderOnLoad: false }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script>
<script>
window.onload = function () {
  var button = document.getElementById('button')
  button.onclick = function () {
    button.remove()
    texme.renderPage()
  }
}
</script>
<textarea>

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

</textarea>
<div><button id="button">Render</button></div>

这是输出：skip-render.html。

加载后设置选项

当我们使用 <script> 标签加载 TeXMe 时，它会在加载后立即开始渲染文档。

因此，在上面的示例中，我们在加载 TeXMe 之前定义了配置选项。

我们通过定义一个名为 window.texme 的对象来实现这一点，其中配置选项定义为该项目中的属性。

但是，如果我们将 renderOnLoad 选项设置为 false，我们会阻止 TeXMe 在加载后渲染文档。

我们现在可以控制稍后调用渲染，例如，单击按钮。

在这种情况下，可以在使用 texme.setOption() 函数加载 TeXMe 后设置配置选项。

该函数采用两个参数：作为字符串的选项名称和选项值。

这是一个在加载时跳过自动渲染并使用此函数将样式设置为“普通”的示例：

<!DOCTYPE html>
<script>window.texme = { renderOnLoad: false }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script>
<script>
window.onload = function () {
  var button = document.getElementById('button')
  button.onclick = function () {
    button.remove()
    texme.setOption('style', 'plain')
    texme.renderPage()
  }
}
</script>
<textarea>

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

</textarea>
<div><button id="button">Render</button></div>

这是输出：set-options.html。

正文内容

如果你不喜欢用 HTML 标签开始你的文档，你可以先写你的内容，然后像这样在最后添加 <script> 标签：

# Euler's Identity

In mathematics, **Euler's identity** is the equality
$$ e^{i \pi} + 1 = 0. $$

## Explanation

Euler's identity is a special case of Euler's formula from complex
analysis, which states that for any real number $ x $,
$$ e^{ix} = \cos x + i \sin x. $$

<script src="https://cdn.jsdelivr.net/npm/texme@1.0.0"></script>

这是输出：content-in-body.html。

尽管本示例中的代码看起来更简洁，但这种编写内容的形式存在一个限制：由于内容是 HTML <body> 元素的一部分（此代码中没有 <textarea> 元素），因此内容应该请仔细编写，以免出现任何 HTML 语法错误。

ps: 内容挺多的，感覺很强大，此處不在贅述。

参考资料

https://github.com/susam/texme

texme
开始
CDN 网址
有效的 HTML5
在网页中使用 TeXMe
参考资料

texme Self-rendering Markdown + LaTeX documents