# Tp-Note renders MathML and adds (some) syntax highlighting

One downside when you take notes with your keyboard and laptop is, that you can not enter mathematical formulas.

To remedy this, Tp-Note version 1.18.0 comes with a new feature: its note viewer and internal web-server can now render MathML in note files written in Markdown. It also features some limited syntax highlighting for source code.

For this new feature, Tp-Note includes the library
cmark-syntax
which itself uses the latex2mathml
crate that performs the MathML rendition. The following example is
taken from latex2mathml's
`README.md`

.

## Tp-Note and MathML

Tp-Note's file viewer launches the system's web browser in order to display the rendered content. For the best user experience, it recommended to use Firefox or Safari because both come with full support for MathML enabled by default. The section Choose your favourite web browser as note viewer in Tp-Note's documentation explains how to change the web browser when viewing files. More information about MathML browser compatibility can be found in MathML | MDN.

### Example: Markdown content with inline MathML

Consider the following Markdown input:

```
The [Erf function]
`$\erf ( x ) = \frac{ 2 }{ \sqrt{ \pi } } \int_0^x e^{- t^2} \, dt$`
is the "error function" encountered in integrating the [normal distribution]
(which is a normalized form of the [Gaussian function]).
```

Note, inline equations are always enclosed by `$ and $`. In Tp-Notes built-in viewer the above is rendered into:

### Example: Markdown content with a LaTeX equation

The next example adds a LaTeX equation:

```
> Let us consider a rigid sphere (i.e., one having a spherical
figure when tested in the stationary system) of radius `$R$`
which is at rest relative to the system (`$K$`), and whose centre
coincides with the origin of `$K$` then the equation of the
surface of this sphere, which is moving with a velocity `$v$`
relative to `$K$`, is
```math
\xi^2 + \eta^2 + \zeta^2 = R^2
```
```

Here the rendered example as it is displayed in Tp-Notes viewer:

## Source code syntax highlighting

Another feature provided by the cmark-syntax is limited syntax highlighting. At the moment of this writing only the following languages are supported:

- Rust
- JavaScript
- sh shell
- TOML

The following “hello world” variant showcases an example:

As you can see from the above example, the syntax highlighting is very basic and does not reach the quality you see in modern text editors. This is, because the highlighting is based on simple regular expressions instead of complex algorithms like Tree-Sitter.

Nevertheless, its discreet style integrates well with the running text and its colours. Overall the source code is rendered in a clearly visible and legible manner. It is just a pity that - for now - only a few programming languages are supported.

## Read more

A good start is Tp-Note's project page or the introductory video. The source
code is available on GitHub - getreu/tp-note and some binaries and packages
for Linux, Windows and Mac can be found here. To fully profit of *Tp-note*, I
recommend reading Tp-Note's user manual. If you like Tp-Note, you probably
soon want to customize it. How to do so, is explained in
Tp-Note's manual page.