tessl/npm-katex

Fast math typesetting for the web.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Chemistry Rendering

Name: tessl/npm-katex
Author: tessl

Chemical equation and formula rendering through the mhchem extension, providing comprehensive support for chemical notation, reactions, and physical units.

Import

import "katex/contrib/mhchem";

For CommonJS:

require("katex/contrib/mhchem");

Capabilities

Chemical Equations (\ce)

Renders chemical formulas, equations, and reactions with proper formatting.

// Available as LaTeX macro after importing mhchem:
// \ce{chemical_expression}

Usage Examples:

import katex from "katex";
import "katex/contrib/mhchem";

// Simple chemical formulas
katex.render("\\ce{H2O}", element);                    // Water
katex.render("\\ce{CaCl2}", element);                  // Calcium chloride
katex.render("\\ce{H2SO4}", element);                  // Sulfuric acid

// Chemical reactions
katex.render("\\ce{2H2 + O2 -> 2H2O}", element);      // Combustion
katex.render("\\ce{A + B <=> C + D}", element);       // Equilibrium
katex.render("\\ce{Fe^3+ + 3OH- -> Fe(OH)3}", element); // Precipitation

// Complex reactions with conditions
katex.render("\\ce{CaCO3 ->[\\Delta] CaO + CO2}", element);
katex.render("\\ce{A ->[H+][\\ce{Hg^2+}] B}", element);

// States of aggregation
katex.render("\\ce{NaCl(aq) + AgNO3(aq) -> AgCl(s) + NaNO3(aq)}", element);
katex.render("\\ce{H2O(l) <=> H2O(g)}", element);

// Charges and oxidation states
katex.render("\\ce{Fe^{II}Fe^{III}2O4}", element);    // Mixed oxidation states
katex.render("\\ce{Cr^{VI}O4^2-}", element);          // Chromate ion

// Bonds
katex.render("\\ce{C-C}", element);                    // Single bond
katex.render("\\ce{C=C}", element);                    // Double bond
katex.render("\\ce{C#C}", element);                    // Triple bond
katex.render("\\ce{C~C}", element);                    // Aromatic bond

Physical Units (\pu)

Renders physical quantities with proper unit formatting and spacing.

// Available as LaTeX macro after importing mhchem:
// \pu{physical_unit_expression}

Usage Examples:

import katex from "katex";
import "katex/contrib/mhchem";

// Basic units
katex.render("\\pu{123 kJ/mol}", element);            // Energy per mole
katex.render("\\pu{298.15 K}", element);              // Temperature
katex.render("\\pu{1.23e-4 mol*L^-1}", element);     // Concentration

// Complex units
katex.render("\\pu{9.81 m*s^-2}", element);          // Acceleration
katex.render("\\pu{1.38e-23 J*K^-1}", element);      // Boltzmann constant
katex.render("\\pu{6.022e23 mol^-1}", element);      // Avogadro's number

// Temperature units
katex.render("\\pu{25 \\degree C}", element);         // Celsius
katex.render("\\pu{77 \\degree F}", element);         // Fahrenheit

// Fractions
katex.render("\\pu{55.4 g//mol}", element);          // Alternative fraction
katex.render("\\pu{RT//F}", element);                // Variables in fractions

// Ranges and uncertainties
katex.render("\\pu{1.23(4) g*cm^-3}", element);     // Uncertainty
katex.render("\\pu{(1.23 +- 0.04) g*cm^-3}", element); // Plus-minus

Chemical Bonds (\tripledash)

Special bond notation for chemical structures.

// Available as LaTeX macro after importing mhchem:
// \tripledash

Usage Example:

import katex from "katex";
import "katex/contrib/mhchem";

// Bond notation in chemical structures
katex.render("\\ce{C~\\tripledash~C}", element);

Supported Chemical Notation

The mhchem extension supports:

Elements: All periodic table elements (H, He, Li, etc.)
Formulas: Subscripts, superscripts, charges (H2SO4, Ca2+, OH-)
Reactions: Arrows, equilibrium, conditions (A + B -> C, A <=> B)
States: Solid (s), liquid (l), gas (g), aqueous (aq)
Bonds: Single (-), double (=), triple (#), aromatic (~)
Isotopes: Mass numbers (^14C, ^235U)
Stoichiometry: Coefficients and fractions (2H2O, 1/2O2)
Conditions: Temperature, pressure, catalysts ([Delta], [H+])

Error Handling

Chemical expressions follow the same error handling as regular KaTeX:

import katex from "katex";
import "katex/contrib/mhchem";

try {
  katex.render("\\ce{InvalidFormula[]}", element);
} catch (error) {
  if (error instanceof katex.ParseError) {
    console.log("Chemical notation error:", error.message);
  }
}

// Or with error suppression
katex.render("\\ce{InvalidFormula[]}", element, {
  throwOnError: false,
  errorColor: "#ff0000"
});

Integration with Auto-Render

mhchem works seamlessly with auto-render:

<div id="chemistry-content">
  <p>Water formula: \\(\\ce{H2O}\\)</p>
  <p>Combustion: $$\\ce{CH4 + 2O2 -> CO2 + 2H2O}$$</p>
  <p>Concentration: \\(\\pu{0.1 mol*L^-1}\\)</p>
</div>

<script>
import renderMathInElement from "katex/contrib/auto-render";
import "katex/contrib/mhchem";

renderMathInElement(document.getElementById("chemistry-content"));
</script>