TeXMe is a lightweight JavaScript utility to create self-rendering Markdown + LaTeX documents.

Get Started

Copy and paste the code below into an HTML file with .html as the extension name:

<!DOCTYPE html>
<html lang="en">
<title>Notes on Euler's Identity</title>
<script src="https://cdn.jsdelivr.net/npm/texme@1.2.2"></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>

Here is the output: valid-html5.html.

It has a few more lines of code to ensure that this HTML5 code validates successfully at validator.w3.org. As a result, this example does not look as concise as the one in the previous section.

In case you are wondering, a valid HTML5 document does not require explicit <head>, <body>, or the closing </html> tags, so they have been omitted for the sake of brevity while maintaining completeness and correctness.

In practice though, it is not necessary to write verbose code like this. All browsers follow the robustness principle, so they can render the shorter example in the Get Started section just fine.

Use TeXMe in Web Pages

Style

TeXMe renders the document on a white pane against a gray background by default. This is due to a configuration option named style that is set to 'viewer' by default.

To render the document with a minimal style on a completely plain white background, set the style configuration option to 'plain'. Here is an example:

<!DOCTYPE html>
<script>window.texme = { renderOnLoad: false }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.2.2"></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>

Here is the output: skip-render.html.

Set Options After Loading

When we load TeXMe with the <script> tag, it begins rendering the document as soon as it loads. Therefore in the above examples, we define the configuration options prior to loading TeXMe. We do this by defining an object named window.texme with the configuration options defined as properties in this project.

However if we set the renderOnLoad option to false, we prevent TeXMe from rendering the document after it loads. We now have the control to invoke the rendering at a later time, e.g., on the click of a button. In this case, it is possible to set configuration options after loading TeXMe with the texme.setOption() function. This function takes two parameters: option name as a string and option value.

Here is an example that skips automatic rendering on load and sets the style to 'plain' using this function:

<!DOCTYPE html>
<script>window.texme = { renderOnLoad: false }</script>
<script src="https://cdn.jsdelivr.net/npm/texme@1.2.2"></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>

Here is the output: set-options.html.

Content in Body

If you do not like to start your document with HTML tags, you can write your content first and add the <script> tag in the end like this:

# 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.2.2"></script>

Here is the output: content-in-body.html.

Although, the code looks neater in this example, there is a limitation associated with this form of writing content: Since the content is part of the HTML <body> element (there is no <textarea> element in this code), the content should be written carefully, so that it does not have any HTML syntax error.

Caveats

While using the content-in-body method of using TeXMe, an HTML syntax error in the content can produced mangled output. For example, the following input is not rendered as expected because the content is in the <body> element, so the browser interprets this content as HTML and encounters the beginning of a start tag that is not closed properly:

Here is some unusual code:
```
print('unusual <string')
```
<script src="https://cdn.jsdelivr.net/npm/texme@1.2.2"></script>

Here is the broken output: unusual-code-body.html.

The <string part of the code is interpreted as the opening of a start tag by the browser. What looks like a fragment of Python code to a human ends up being parsed as an HTML tag by the browser that looks like this:

<!DOCTYPE html>
<script>
window.texme = {
  markdownURL: 'marked/marked.min.js',
  MathJaxURL: 'mathjax/es5/tex-mml-chtml.js'
}
</script>
<script src="texme/texme.min.js"></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>

Now open euler.html with a web browser and it should self-render fine. All resources will be loaded from the local disk.

Now test euler.html by serving it via a web server. Assuming Python 3 is installed, here is one really easy way to test it:

python3 -m http.server

Then open https://localhost:8000/euler.html using a web server. The network tab in the browser's developer tools should show that all resources are loaded from the same web server and no requests to any other server are made.

Markdown Priority Environment

TeXMe provides a special LaTeX-like environment named md. This is the markdown priority environment. We will see what this term means in the next section. Let us first see what this environment does by looking at a few examples of when this special environment can be useful.

TeXMe introduces the special purpose md environment to protect portions of Markdown content from being interpreted as LaTeX. In most documents, the use of this environment is not required. This environment is useful only in a handful of scenarios where a Markdown element like code span, code block, link, image, etc. may contain content with LaTeX delimiters that may get interpreted as LaTeX by TeXMe thereby leading to a broken rendering of the Markdown element. This environment protects the content of one or more Markdown elements from being interpreted as LaTeX. Let us see a few examples in the next two subsections.

Protect Dollar Sign in Code

The md environment is useful when Markdown code spans or code blocks contain LaTeX delimiters. This environment prevents the content of Markdown code spans and code blocks from being interpreted as LaTeX. Here is an example:

Contents