ChemmacrosJS

This project aims to make the functions of the excellent LaTeX package chemmacros available for JavaScript and use in HTML. Integration in LiaScript (https://liascript.github.io/) is just as possible as use with vanilla JavaScript.

Syntax

The syntax is quite simple, there are only some rules:

• the fist character after ^ will be superscripted
• all characters in {} after ^ will be superscripted
• the first character after _ will be subscripted
• all characters in {} after _ will be subscripted
• Numbers after brackets, parenthesis and element symbols will be subscripted
• + and − after brackets, parenthesis and element symbols will be superscripted
• . and * will be interpreted as ·
• equations will be splitted at whitespaces and interpreted in parts

Arrows

Code	Result
->	→
^ (with whitespaces around)	↑
v (with whitespaces around)	↓
<=>	⇄

Examples

Al2O3
K4[Fe(CN)6]
2 H2 + O2 -> 2 H2O
H2 + I2 <=> 2 HI
CuSO4 . 5 H2O

Use in Vanilla JavaScript

Loading

Jut include the script and stylefile in the header of your HTML document.

<!--
<link rel="stylesheet" href="style_chemmacros.css">
<script src="chemmacros.js"></script>
-->

Chemical formulae in the Text

All elements of the class chemmacros will be interpreted and replaced by the formula inside.

<span class="chemmacros">Al2(SO4)3</span>

Chemical Equations

All elements of the class chemreaction and chemreactions will be interpreted and replaced by the formula inside. The second class is for aligned and numbered multiline equations.

<span class="chemreaction">HCl_{(g)} + NH_{3(g)} -> NH_4Cl_{(s)} </span>

<div class="chemreactions">
  HCl_{(g)} + NH_{3(g)} &-> NH_4Cl_{(s)}\\
  2 H2 + O2 &-> 2 H2O
</div>

When using the chemreaction class, no numbering of the equation or alignment will be done while the use of the chemreactions class the equations will be aligned accordin to the position of & and euqations will be enummerated.

GHS pictograms

Any element of the class ghspicContainer will be filled with the pictograms. Add all pictogram identifiers in the data-pics attribute.

<span class="ghspicContainer" data-pics="exclam flame"></span>

H and P Statements

Any element of the class clpstatements will be filled with the statements. Add all statements in the data-hstatements and data-pstatements attributes. You may add another langugae than englisch setting the data-lang attribute.

<span class="clpstatements" data-hstatements="302​‐​331​‐​315​‐​319​‐​351​‐​361d​‐​336​‐​372​‐​412" data-pstatements="201​‐​273​‐​301+312+330​‐​302+352​‐​304+340+311​‐​308+313" data-lang="sv"></span>

You can fill gaps in the statements by adding the filling in brackets after the statement. If there are multiple gaps, you can split them using ";". It is possible to simply remove gaps by passing nothing in the brackets:

<span class="clpstatements" data-hstatements="370[Liver;]"></span>

Use in LiaScript

Loading

Import this file like other LiaScript templates:

<!--
import: https://raw.githubusercontent.com/herbigm/ChemmacrosJS/refs/heads/main/README.md
-->

Chemical formulae in the Text

There is a macro for displaying formulae in HTML:

@ch(`K3[Fe(CN)6]`)

Be carefull, if the formula contains comma or parenthesis, backticks are required around the formula.

Chemical Equations

There are two macros to define chemical equations in LiaScript:

@reaction(2 H2 + O2 -> 2 H2O)

@reactions(```
3 H2 + N2 &-> 2 NH3\\
4 NH3 + 5 O2 &-> 4 NO + 6 H2O
```)

When using the reaction macro, no numbering of the equation or alignment will be done while the use of the reactions macro the equations will be aligned accordin to the position of & and euqations will be enummerated. As for the formulae, if the code inside the reaction macro contains any parenthesis or comma, it has to be enclosed by backticks.

GHS pictograms

To include GHS pictograms in LiaScript, use the macro ghspic with the pic you want to include as argument, separated by whitespaces.

@ghspic(explos flame flame-O bottle acid skull exclam health aqpol)

H and P Statements

For displaying H and P statements, the mhchem repository is used: https://github.com/mhchem/hpstatements

There are three macros to include the sentences:

@hstatements(290-263-304)

@pstatements(310-305+351+338)

@statementsLangType(<lang>, <H|P>, <numbers>)

You can fill gaps in the statements by adding the filling in brackets after the statement. If there are multiple gaps, you can split them using ";". It is possible to simply remove gaps by passing nothing in the brackets:

@hstatements(370[Liver;])

License

This project is published to the terms of the CC-BY Attribution 4.0 International Deed.