# EQHL
A tool for explaining equations.

## Structure
An `Equation` object contains a list of `Term` and `HLTerm`.
`HLTerm` is an equation term that displays a tool tip and is highlighted when hovered over.
It takes two arguments, the first is the LaTeX math to be displayed via [KaTeX](https://katex.org/), the second is the tooltip to display.
Highlight color is chosen automatically from six pre-defined colors that are cycled through.
A `Term` only takes LaTeX math and is used for un-emphasized characters and terms, such as equal signs.

## Usage
To create an `Equation`, pass a list of `Term` and `HLTerm` as follows:
```
newtons_second = Equation([HLTerm(r'\vec{F}', 'Force'), Term('='), HLTerm('m', 'Mass'), HLTerm(r'\vec{a}', 'Acceleration')])
```
Note the usage of `r'raw string literals'` to avoid LaTeX backslash commands being interpreted as an escape character.

### Webpages
There are four things you need to do to put an equation on your webpage:

1. [Install KaTeX](https://katex.org/docs/browser.html) on the page
2. Make sure that KaTeX is told to render math on the page, this can be done with JavaScript: `renderMathInElement(document.body);`, [more info here](https://katex.org/docs/autorender.html).
3. Put `eqhl.css` somewhere appropriate and add it to your document's `<head>`: `<link type="text/css" rel="stylesheet" href="eqhl.css">`
4. Add the HTML generated by the Python file to your webpage

### Customization
#### Using SASS
The recommended way to customize is to install the `sassc` [SASS](https://sass-lang.com) compiler, edit `eqhl.sass` and then run `make`.
Color variables can be changed at the top of the file.

#### Using CSS
Without SASS, edit `eqhl.css` and modify colors directly.
