How to get started

This is a basic tutorial, designed to help you get started using CharChem.

Suppose we write a brief article. Here is her initial billet without CharChem

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
  <h1>A small article in Chemistry</h1>
  <h2>Confirmation test for iron II</h2>
  <div align="center">TODO: Chemical reaction...</div>
  <h2>Curcumin</h2>
  <div align="center">TODO: structural formula</div>
</body>
</html>

Now you need to connect the CharChem and add a description of formulas. The actions associated with the CharChem connection in blue. A description of the formulas are highlighted purple.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://charchem.org/download/charchem2.js"></script>
  <link rel="stylesheet" href="http://charchem.org/download/charchem.css" />
</head>
<body class="echem-auto-compile">
  <h1>A small article in Chemistry</h1>
  <h2>Confirmation test for iron II</h2>
  <div align="center" class="echem-formula">
    3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+
  </div>
  <h2>Curcumin</h2>
  <div align="center" class="echem-formula">
    `\`/<`\H3C`O>|<`/HO>\/`|_o/\\/<`||O>\/<`||O>\//\/\(*/`OCH3*)|<\OH>`/`\`|_o
  </div>
</body>
</html>

The result was a small article
Show / Hide

A small article in Chemistry

Confirmation test for iron II

3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+

Curcumin

`\`/<`\H3C`O>|<`/HO>\/`|_o/\\/<`||O>\/<`||O>\//\/\(*/`OCH3*)|<\OH>`/`\`|_o

Here we do not consider the description of formulas as this is a separate section. Let us consider the action associated with the connection.

Notice the very first line. It contains a DOCTYPE. Although it has no direct relation to CharChem, but without it, Internet Explorer will not show the graphic formulas.
First selected line — the most important — connecting to the CharChem library. The easiest way is connecting to the charchem.org site. You can also download the library to use its functions without access to the Internet.
The second selected line — to connect CSS. This action is, strictly speaking, is not required, but appreciated. The way with Internet connection is offered in this example, but you can use the downloaded file.
This code body class="echem-auto-compile" is reports that all the tags with a class "echem-formula", contain a description of the formulas. Automatically instead of descriptions will be filled final visual representation.
If for some reason it is impossible to modify the "body" tag, you can use an adequate substitute - anywhere in the document to place this code:
```
<span class="CharChemConfig auto-compile"></span>
```
Now you can add any number of structures <span class="echem-formula">H2O</span> or <div class="echem-formula">H2SO4</div> in the document (tag type does not matter). And then everywhere will automatically show the correct formula.
Although it is desirable to check the correctness of description, before inserting them into the text. You can use the Test stand.

Using CharChem without formula auto-substitution

There are situations when automatic formula substitution is not possible. For example, if the content is generated dynamically using a script. In this case, formula substitution must also be performed using a script.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://easychem.org/download/charchem.js"></script>
  <link rel="stylesheet" href="http://charchem.org/download/charchem.css" />
</head>
<body>
  <h1>A small article in Chemistry</h1>
  <h2>Confirmation test for iron II</h2>
  <div id="F1" align="center"></div>
  <h2>Curcumin</h2>
  <div id="F2" align="center"></div>
  <script>
    var elem1 = document.getElementById('F1');
    var ex1 = ChemSys.compile('3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+');
    elem1.innerHTML = ex1.html();

    var elem2 = document.getElementById('F2');
    var ex2 = ChemSys.compile(
    "`\\`/<`\\H3C`O>|<`/HO>\\/`|_o/\\\\/<`||O>\\/<`||O>\\//\\/\\(*/`OCH3*)|<\\OH>`/`\\`|_o");
    ChemSys.draw(elem2, ex2);
  </script>
</body>
</html>

There is one important point: the text descriptions of the formulas should not be used as string constants in the script, as they may contain special characters \ " or '. Description of the formula of curcumin was first inserted into the test stand, and then use the "Source code for the JavaScript".

Also note that the ex1.html() construct creates a textual representation, which does not work for all formulas. And the ChemSys.draw(elem2, ex2) construct creates a graphical representation, which works for any formulas.

The text of the article was updated 2024-12-03 by PeterWin.