How to get started

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

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

<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 easyChem and add a description of formulas. The actions associated with the easyChem 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 type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://easychem.org/download/easychem.js"></script>
  <link rel="stylesheet" type="text/css" href="http://easychem.org/download/easychem.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 easyChem, but without it, Internet Explorer will not show the graphic formulas.
First selected line connects the jQuery library. Those who know what the library can connect it any way you want. From the site jquery.com you can download a version of the library, not to refer to it constantly over the internet.
Just below describes how to use easyChem without jQuery.
The second line - the most important - connecting to the easyChem library. The easiest way is connecting to the easychem.org site. You can also download the library to use its functions without access to the Internet.
The third 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="easyChemConfig 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 easyChem without jQuery

The jQuery library is not necessary for easyChem. The jQuery is used only for high-level functions related to navigation in html-document. But if you write some code in JavaScript, we can get here is a minimal version of this article:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://easychem.org/download/easychem.js"></script>
</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".