Online Markdown Editor with MathJax/KaTeX & Live Preview

# `Markdown` Editor Demo

Features **Markdown** (via `markdown-it`) & (via `marked`) **Math** ($\LaTeX$), **Syntax Highlighting**, **Mermaid Diagrams**, and **Footnotes**[^1].

---

## Math Rendering

Select **MathJax** or **KaTeX** using the buttons above.

### Inline: $E=mc^2$ and $ ax^2 + bx + c = 0 $

### Display (Einstein Field Equations):
$$ G_{\mu \nu} + \Lambda g_{\mu \nu} = \frac{8 \pi G}{c^4} T_{\mu \nu} $$

### Display (Schwarzschild Metric):
$$ ds^2 = -\left(1 - \frac{2GM}{c^2 r}\right) c^2 dt^2 + \left(1 - \frac{2GM}{c^2 r}\right)^{-1} dr^2 + r^2 (d\theta^2 + \sin^2\theta d\phi^2) $$

### Aligned Equations (MathJax only works well here):
\begin{align}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{align}

---

# eg of `marked`

#### **Einstein Field Equations**
\[ G_{\mu \nu} + \Lambda g_{\mu \nu} = \frac{8 \pi G}{c^4} T_{\mu \nu} \]

#### **Metric Tensor (Schwarzschild Solution)**
\[ ds^2 = -\left(1 - \frac{2GM}{c^2 r}\right) c^2 dt^2 + \left(1 - \frac{2GM}{c^2 r}\right)^{-1} dr^2 + r^2 d\Omega^2 \]

# eg of `marked-it`
#### **Einstein Field Equations**

$$
G_{\mu \nu} + \Lambda g_{\mu \nu} = \frac{8 \pi G}{c^4} T_{\mu \nu}
$$

#### **Metric Tensor (Schwarzschild Solution)**

$$
ds^2 = -\left(1 - \frac{2GM}{c^2 r}\right) c^2 dt^2 + \left(1 - \frac{2GM}{c^2 r}\right)^{-1} dr^2 + r^2 d\Omega^2
$$

## Mermaid Diagram Example

```mermaid
graph TD
    A[Start] --> B{Is it Awesome :?};
    B -- Yes --> C[Awesome!!];
    B -- No --> D[Improve It!];
    D --> B;
    C --> E[Finish];
    
    E --> F[End];
    
```

---
| Feature         | Support      | Engine(s)        |
|-----------------|--------------|------------------|
| Basic Markdown  | Yes          | `markdown-it`, `marked` |
| Math (LaTeX)    | Yes          | `MathJax`, `KaTeX` |
| Syntax Highlighting | Yes      | `highlight.js`   |
| Diagrams        | Yes          | `Mermaid`        |
| Footnotes       | Yes          | `markdown-it`    |
| Custom CSS      | Yes          | Editor Feature   |

## Syntax Highlighting

```python
import numpy as np

def main():
    
    x = np.array([1, 2, 3])
    print(f"Hello from Python! {x.mean()}")

if __name__ == "__main__":
    main()
```

```javascript
async function getData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
    const data = await response.json();
    console.log("Data:", data);
    return data; 
  } catch (error) {
    console.error("Fetch failed:", error);
  }
}
```

---

[^1]: This is a footnote rendered by `markdown-it-footnote`.

This text tries to use features that might fail in less robust editors, especially AI-generated content mixing complex math and code blocks.

Custom Preview CSS