将以下代码复制并粘贴到扩展名为.html的HTML文件中:
<;!DOCTYPE html&><;script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;<;textarea>;#欧拉的标识在数学中,**欧拉的标识**是等式$$e^{i\pi}+1=0。$$##ExplanationEuler的恒等式是复分析中Euler公式的一个特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$。
使用Web浏览器打开此HTML文件。它将自身呈现为如下所示:Content-in-textarea.html。以下是输出的屏幕截图:
TeXMe在将内容呈现为HTML之前删除内容中的所有前导空格和尾随空格。
如果没有指定显式<;title>;元素,TeXMe使用内容的第一个非空行来设置页面标题。设置页面标题时,将删除所有前导和尾随空格以及散列(#)字符。
如果您不喜欢以HTML标记开始文档,可以先编写内容,然后在末尾添加<;script>;标记,如下所示:
#Euler恒等式在数学中,**Euler恒等式**是等式$$e^{i\pi}+1=0。$$##解释Euler的恒等式是复分析中Euler公式的特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$<;Script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;
虽然本例中的代码看起来更整洁,但与这种形式的编写内容相关的限制是:由于内容是HTML<;body>;元素的一部分(此代码中没有<;textarea>;元素),因此应该仔细编写内容,这样才不会有任何HTML语法错误。
在使用TeXMe的正文内容方法时,内容中的HTML语法错误可能会产生损坏的输出。例如,以下输入未按预期呈现,因为内容在<;body>;元素中,因此浏览器将此内容解释为HTML,并遇到未正确结束的开始标记的开头:
浏览器将代码的<;字符串部分解释为开始标记的开始。对于人来说,看起来像Python代码片段的内容最终会被浏览器解析为HTML标记,如下所示:<;string';)<;script=";";";src=";https://cdn.jsdelivr.net/npm/[email protected]";>;.This格式的输入随后被呈现,从而导致意外的结果。
有两种方法可以解决此问题。当然,第一种方法是将内容放入<;textarea>;元素中(如本文档中的第一个示例所示)。下面的输入很好,因为内容放在<;textarea>;元素中。
由于内容出现在<;textarea>;元素中,因此浏览器不会尝试将其解析为HTML,因此不会损坏它。
解决这个问题的第二种方法是使用&;lt;而不是<;,这样输入看起来不再有部分开始标记。下面是一个示例:
在<;script>;标记中使用以下URL加载TeXMe版本0.7.0(此时为当前版本):
在<;script>;标记中使用以下URL可始终加载最新版本的TeXMe:
如果您需要一些非常容易记住的东西,可以使用以下URL加载最新版本的TeXMe:
上一节中的入门示例试图展示如何使用一行HTML代码创建自呈现文档,但这种简洁性是以遵守标准为代价的。例如,代码中缺少必需的<;title>;元素。此外,<;textarea>;元素没有关闭。
为完整和正确起见,以下是一个最小但完整且有效的HTML5示例:
<;!DOCTYPE html>;<;html lang=";EN";>;Title>;关于欧拉的身份<;/Title&><;Script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;<;textarea>;#欧拉的数学身份,**欧拉&39;的恒等式**是等式$$e^{i\pi}+1=0。$$##ExplanationEuler的恒等式是复分析中Euler公式的一个特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$<;/textarea>;
它还有几行代码来确保此HTML5代码在validator.w3.org上成功验证。因此,这个示例看起来并不像上一节中的示例那样简明扼要。
如果您想知道,有效的HTML5文档不需要显式<;head>;、<;body>;或结束<;/html>;标记。因此,为了简洁起见,在保持完整性和正确性的同时,省略了它们。
但在实践中,没有必要像这样编写冗长的代码,所有浏览器都遵循健壮性原则,因此它们可以很好地呈现上一节中较短的示例。
默认情况下,TeXMe在灰色背景的白色窗格上呈现文档。这是由于名为style的配置选项默认设置为查看器。
要在完全纯白色背景上以最小样式呈现文档,请将样式配置选项设置为';PLAN';。下面是一个示例:
<;!DOCTYPE html>;<;script>;window.texme={Style:';PLAN&39;}<;/Script>;<;Script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;<;textarea>;#欧拉的标识在数学上,**欧拉的标识**等于$$e^{i\pi}+1=0。$$##ExplanationEuler的恒等式是复分析中Euler公式的一个特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$。
要以绝对无样式呈现文档,请将样式设置为';无';。在使用常规CSS代码定义自定义样式之前,“无样式”选项可用于禁用TeXMe设置的默认查看器样式。下面是一个例子:
<;!DOCTYPE html&>;<;Script>;window.texme={Style:';None';}<;/Script>;<;Script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;<;style>;body{背景:浅青色;}Main{最大宽度:20em;填充:1em;边框:中双灰色;边距:2EM自动;背景:浅黄;}<;/style>;<;textarea>;#Euler‘s Identity在数学中,**Euler’s Identity**是等式$$e^{i\pi}+1=0。$$##ExplanationEuler的恒等式是复分析中Euler公式的一个特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$。
请注意,呈现的内容显示在<;正文>;内的<;main>;元素中。这就是在上面的示例中设置这些元素样式的原因。
若要呈现仅限Markdown的内容而不包含任何数学内容,请将useMathJax和ProtectMath选项设置为false:
<;!DOCTYPE html>;<;script>;window.texme={useMathJax:False,ProtectMath:False}<;/Script>;<;Script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;<;textarea>;#原子理论**原子理论**是关于物质性质的科学理论,它指出物质是由称为*原子*的离散单元组成的。它起源于古希腊的一个哲学概念,在19世纪初进入科学主流,当时化学领域的发现表明,物质的行为确实就像它是由原子组成的一样。
当TeXMe加载时,它会自动开始呈现文档。通过将renderOnLoad选项设置为false,可以跳过此自动渲染。下面是一个禁用自动呈现,然后稍后通过使用TeXMe API中的texme.renderPage()函数在单击按钮时调用呈现的示例:
<;!DOCTYPE html>;<;Script>;window.texme={renderOnLoad:False}<;/Script>;<;Script src=";https://cdn.jsdelivr.net/npm/[email protected]";>;<;/script>;<;script>;window.onload=Function(){var Button=Document.getElementById(';Button';)button.onclick=function(){button.remove()texme.renderPage()}}<;/script>;<;textarea>;#Euler>;#Euler的标识在数学上,**Euler的标识**等于$$e^{i\pi}+1=0。$$##解释欧拉的恒等式是复杂分析中欧拉公式的一个特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$<;/text&>d;<;按钮id=";button";>;Render<;/button>;<;/div>;
当我们用<;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/[email protected]";>;<;/script>;<;script>;window.onload=Function(){var Button=Document.getElementById(';Button';)Button.onClick=Function(){Button.Remove()texme.setOption(';Style';,';)texme.renderPage()}}<;/script>;<;#Euler>;#Euler>;的标识在数学中,**Euler的标识**等于$$e^{i\pi}+1=0。$$##解释欧拉的恒等式是复杂分析中欧拉公式的一个特例,该公式指出对于任意实数$x$,$$e^{ix}=\cos x+i\sin x.$$<;/text&>d;<;按钮id=";button";>;Render<;/button>;<;/div>;
到目前为止,大多数示例都使用TeXMe作为实用程序。这些示例将TeXMe加载到网页中,然后TeXMe自动选取包含Markdown+LaTeX代码的<;textarea>;元素并将其呈现为HTML。
在本节中,我们将了解如何将TeXMe用作库并调用其函数。这些示例将在Node.js上按原样运行。
只需调用texme.ender()函数,就可以将markdown+LaTeX内容呈现为HTML。它接受Markdown+LaTeX内容作为字符串,并将呈现的HTML作为字符串返回。下面是一个例子:
UseMathJax(默认情况下为true):当设置为true时,加载MathJax并将其运行到renderLaTeX。设置为False时,不要加载或运行MathJax。
ProtectMath(默认情况下为true):当设置为true时,防止Markdown渲染器看到LaTeX代码。因此,当设置为true时,可能包含可解释为Markdown的文本(例如,$${a}_{1}{a}_{2}$$)的LaTeX内容保持不变。让Markdown渲染器在LaTeXcode中查找Markdown文本,并在设置为False时渲染它。例如,当此选项设置为False时,$${a}_{1}{a}_{2}$$呈现为<;p>;$${a}<;em>;{1}{a}<;/em>;{2}$$<;/p>;。
样式(默认为';查看器';):支持三个值:';查看器';、';普通';和';无';。查看器样式在灰色背景下的白色窗格上显示呈现的文档。普通样式以非常小的样式显示内容,不会更改背景样式。如果设置为';无';,则不会应用任何样式,文档将以浏览器的默认样式显示。
RenderOnLoad(默认情况下为true):当设置为true时,开始在加载时自动呈现文档。设置为False时自动跳过渲染。
OnRenderPage(默认情况下未定义):TeXMe完成呈现页面后自动调用的回调函数。保证TeXMe在调用此回调之前已经完成了页面呈现。如果useMathJax选项为true,则还可以保证TeXMe在调用此回调之前已经使用MathJax调用了排版LaTeX。但是,不能保证MathJax在调用此回调之前已经完成了页面的排版。MathJax排版异步进行,可能在调用此回调后完成。此回调仅在texme.renderPage()函数在Web浏览器中运行时运行,无论是由于加载时自动呈现,还是由于对此函数的显式调用。
CommonmarkURL(缩小commonmark.js的CDN URL,即commonmark.min.js,默认为0.28.1版本):web浏览器运行时加载commonmark.js的URL。
MathJaxURL(MathJax版本2.7.5的CDN URL):在Web浏览器中运行时加载MathJax.js的URL。
这是免费的开源软件。根据麻省理工学院许可的条款,您可以使用、复制、修改、合并、发布、分发、再许可和/或出售其副本。有关详细信息,请参阅LICENSE.md。
本软件按原样提供,不提供任何明示或暗示的担保。有关详细信息,请参阅LICENSE.md。