DOCSEARCHbyAlgolia
Submit Docs

Temml

repository·main·Indexed 43 days ago

https://github.com/ronkok/temml

A lightweight JavaScript utility for converting LaTeX math notation into MathML Core. Designed as a compact alternative to MathJax and KaTeX, Temml version 0.13.5 supports browser and server-side (Node.js) rendering. It includes extensions for chemical equations (mhchem), physics syntax, MediaWiki-specific functions (texvc), and a Copy-tex extension for copying MathML as LaTeX.

Tokens
45.6K
Snippets
84
Records
107
Agent score
52%

What's inside Temml

  2. Secure Temml against untrusted inputs

    main

    While Temml-generated HTML is generally safe from <script> injection, you can use specific options to provide finer security control when processing untrusted inputs:

    • maxSize: Prevents large width/height visual disruptions.
    • maxExpand: Prevents infinite macro loop attacks.
    • trust: Use with caution. Allows commands that may load external resources or modify HTML attributes (e.g., \includegraphics or \class).

  3. Use Subscripts and Superscripts

    main

    Temml supports subscripts and superscripts using standard LaTeX notation (e.g., A^{2+3}).

    Additionally, Temml supports Math-mode Unicode subscript and superscript characters. If you use these Unicode characters directly in your input, they will render as if they were written in a subscript or superscript position.

    Example: A²⁺³ will render identically to A^{2+3}.

  4. Manage macro persistence and preambles

    main

    Temml allows you to define macros that can either be local to a single render call or persist across multiple calls.

    Defining a Preamble

    To define document-wide macros or colors, use temml.definePreamble. This returns a macros object that you can pass into subsequent render calls.

    const macros = temml.definePreamble(`
  \\newcommand\\d[0]{\\operatorname{d}\\!}
  \\def\\foo{x^2}
  \\definecolor{sortaGreen}{RGB}{128,128,0}
`);

    Persisting Macros

    • Non-persistent: If you call temml.render without passing a macros object, macros defined via \gdef or \global\let in the TeX string will not be available in the next render call.
    • Persistent: To carry macros from one element to the next, capture the macros object and pass it into the options of every render call.
    const macros = {}; // Or from definePreamble

for (let aSpan of [...mathSpans]) {
    const tex = aSpan.textContent;
    const displayMode = aSpan.classList.contains("display");
    // Pass the macros object to ensure persistence
    temml.render(tex, aSpan, { macros, displayMode });
}
    const macros = temml.definePreamble(
    `\\newcommand\\d[0]{\\operatorname{d}\\!}
    \\def\\foo{x^2}
    \\definecolor{sortaGreen}{RGB}{128,128,0}`
);

  5. Use mhchem syntax in Temml

    main

    The extension enables chemical equation and unit syntax using \ce and \pu commands.

    • Chemical Equations: Use \ce.
    • Units: Use \pu.

    Note on Deprecated Commands: This extension supports \ce but does not support the deprecated \cf command. If your source content uses \cf, you must define a macro that maps \cf to \ce to maintain compatibility.

    For a full list of supported syntax and examples, refer to the mhchem Manual.

  6. Use color functions in LaTeX

    main

    Temml supports several LaTeX commands for applying color to mathematical expressions. You can use standard color names, hex codes, or define custom colors using \definecolor.

    Supported Commands

    • \color{color_name} content or {\color{color_name} content}: Sets the color for the following content.
    • \textcolor{color_name}{content}: Sets the color for the specified content.
    • \colorbox{color_name}{content}: Places content in a colored box.
    • \fcolorbox{border_color}{background_color}{content}: Places content in a box with a specific border color and background color.

    Color Models

    Most color functions allow an optional argument to specify a color model (similar to the xcolor package). Supported models are:

    • HTML (e.g., \color[HTML]{ff00ff})
    • RGB (e.g., \color[RGB]{255,0,255})
    • rgb (e.g., \color[rgb]{1,0,1})

    Note: For \definecolor, the model argument is required.

    Defining Custom Colors

    You can define custom colors using \definecolor. To make these colors available throughout your entire document, include the definitions in your preamble.

    Example of defining and using a custom color:

    \definecolor{sortaGreen}{RGB}{128,128,0}
{\color{sortaGreen} F=ma}

  7. Customize automatic equation numbering

    main

    Temml uses CSS counters for automatic equation numbering in certain AMS environments. The default numbering is controlled by the .tml-eqn::before class and a tmlEqnNo counter.

    You can customize the numbering format (e.g., adding a chapter prefix) by overwriting the content rule in your CSS:

    /* Example: Prefixing numbers with '3.' to get (3.1), (3.2), etc. */
.tml-eqn::before { content: "(3." counter(tmlEqnNo) ")"; }

    Troubleshooting: If numbering is not working, ensure your own CSS has not overwritten the counter-reset on the body element.

    .tml-eqn::before { content: "(3." counter(tmlEqnNo) ")"; }

  8. Install the mhchem extension

    main

    The mhchem extension adds support for \ce (chemical equations) and \pu (units) functions to Temml. Because it is an extension, it must be included separately from the core library.

    Client-side (Browser)

    Include the mhchem.min.js script in your HTML <head> immediately after the temml.min.js script.

    Server-side (Node.js)

    If you are working in a server-side environment, use temml.cjs. The mhchem functionality is already bundled within the CommonJS version of Temml.

    <script src="./temml.min.js"></script>
<script src="./mhchem.min.js"></script>

  9. Render Unicode Characters

    main

    To render arbitrary Unicode characters (including Mathematical Alphanumeric Symbols like Bold, Fraktur, or Script) in Temml, use one of the following two methods:

    1. Using \char with a hex code: \char"263a renders ☺.

    2. Using \text{...}: \text{☺} renders ☺.

    Note on Mathematical Script: For the Unicode range U+1D49C - U+1D4B5 (Mathematical Script), Temml defaults to chancery glyphs (matching \mathcal{...}). To force roundhand glyphs (per Unicode 14+), append the \ufe01 character to the symbol.

    \char"263a
\text{☺}

  10. Check TeX function support in Temml

    main
    Temml supports a wide range of TeX math-mode functions by converting them to MathML Core. Support is categorized into core functions and those provided by specific extensions. If a function is listed with an extension name (e.g., physics extension, ams, stix, statmath, texvc, actuarialangle, or LaTeX 2ε), it will only be available if the corresponding extension is included in your project. Some functions may be explicitly marked as (Not supported).

  11. Install Temml for browser or server-side use

    main

    Browser Installation

    To use Temml in a browser, download the release zip from the releases page. A minimum installation requires the following files to be placed in the same folder:

    • temml.min.js
    • Temml-Local.css
    • Temml.woff2 (The CSS and font files must reside in the same directory).

    Server-Side Installation

    For Node.js or server-side environments, install via npm or yarn:

    npm install temml
# or
yarn add temml

    When using Temml on the server, import temml.cjs or temml.mjs instead of temml.min.js.

    npm install temml

  12. Set up a Temml starter template in HTML

    main

    Temml requires the HTML5 doctype. To set up a basic environment, include the Temml-Local.css stylesheet and the temml.min.js script in your <head> section. Ensure the CSS and font files are correctly linked in the same directory.

    <!DOCTYPE html>
<!-- Temml requires the use of the HTML5 doctype. -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./Temml-Local.css">
        <script src="./temml.min.js"></script>
    </head>
    <body>
        <!-- MathML content goes here -->
    </body>
</html>