How do I create math equations in the MarkMath editor?

Use $ for inline math equations and $$ for block equations. The editor supports full LaTeX math syntax with real-time preview.

Can I create diagrams or flowcharts in MarkMath?

Yes, the editor supports Mermaid diagrams. You can create flowcharts, sequence diagrams, class diagrams, and more using Mermaid syntax.

Does the MarkMath editor work on mobile devices?

Yes, the editor is fully responsive. On mobile devices, the editor and preview panels stack vertically for an optimal viewing experience.

Is MarkMath free to use?

Yes, MarkMath is completely free to use with no registration required. All features including LaTeX support, live preview, and code highlighting are available at no cost.

Editor

Sync Scroll

# Welcome to Online Markdown Editor! ✨

Transform your technical writing with our advanced markdown editor - featuring LaTeX math support, code syntax highlighting, and instant preview.

[![Made by DigitalPro](https://img.shields.io/badge/Made%20by-DigitalPro-blue)](https://digitalpro.dev)
[![Live Demo](https://img.shields.io/badge/Live-Demo-green)](https://markdownlivepreview.org)
![Static Badge](https://img.shields.io/badge/Version-1.0.1-blue)

## Technical Writing Features

### Mathematical Expressions

Our editor supports comprehensive LaTeX math syntax:

Inline equation: $E = mc^2$

Display equations:
$$
\begin{align*}
\frac{d}{dx}e^x &= e^x \\
\int_a^b f(x)dx &= F(b) - F(a) \\
\sum_{i=1}^n i &= \frac{n(n+1)}{2}
\end{align*}
$$

Matrix operations:
$$ 
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix}
x \\
y
\end{pmatrix} =
\begin{pmatrix}
ax + by \\
cx + dy
\end{pmatrix}
$$

### Code Syntax Highlighting

Multiple language support:

```python
def calculate_complexity(n):
    """Calculate time complexity."""
    operations = 0
    for i in range(n):
        for j in range(n):
            operations += 1
    return operations

print(calculate_complexity(10))
```

```javascript
// API request example
async function fetchData() {
  try {
    const response = await fetch('api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}
```

### Technical Documentation Tables

| Operation | Time Complexity | Space Complexity |
|-----------|----------------|------------------|
| Search    | $O(\log n)$   | $O(1)$          |
| Insert    | $O(1)$         | $O(n)$          |
| Delete    | $O(n)$         | $O(1)$          |

### Advanced Math Examples

Complex calculus:
$$
\lim_{h \to 0} \frac{f(x + h) - f(x)}{h} = f'(x)
$$

Statistical formulas:
$$
\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^N (x_i - \mu)^2}
$$

### Code Documentation

```typescript
interface DataStructure<T> {
  /** Add element to collection */
  add(item: T): void;
  
  /** Remove element from collection */
  remove(item: T): boolean;
  
  /** Check if element exists */
  contains(item: T): boolean;
}
```

### Technical Notes

> **Important**: LaTeX expressions must be properly escaped in markdown.
> Use `$...$` for inline math and `$$...$$` for display math.

### Quick Reference

1. **Math Symbols**
   - Greek Letters: $\alpha$, $\beta$, $\gamma$
   - Operators: $\sum$, $\prod$, $\int$
   - Relations: $\subset$, $\approx$, $\equiv$

2. **Code Features**
   - Syntax highlighting
   - Line numbers
   - Code folding
   
3. **Table Support**
   - Column alignment
   - Complex formatting
   - Math in tables

## Additional Features

<details>
<summary>Advanced LaTeX Examples</summary>

$$
\begin{cases}
x & \text{if } x \geq 0 \\
-x & \text{if } x < 0
\end{cases}
$$

Vector calculus:
$$
\nabla \times \mathbf{F} = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial}{\partial x} & \frac{\partial}{\partial y} & \frac{\partial}{\partial z} \\
F_x & F_y & F_z
\end{vmatrix}
$$
</details>

## Mermaid Diagrams Features

### Flowchart

```mermaid
flowchart LR
   a --> b & c--> d
```

```mermaid
flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f
```

```mermaid
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

### Sequence Diagram

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

### Class Diagram

```mermaid
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
```

### State Diagram

```mermaid
stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

[*] --> NamedComposite
    NamedComposite: Another Composite
    state NamedComposite {
        [*] --> namedSimple
        namedSimple --> [*]
        namedSimple: Another simple
    }
```

### Entity Relationship Diagram

```mermaid
---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

### Timeline

```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```

### Pie Chart

```mermaid
pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45
```

### Mindmap

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

### Quadrant Chart

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

---

### Get Started with Technical Writing!

Write in the editor (left) and see instant preview (right) 🚀

[View LaTeX Guide](#) • [Code Examples](#) • [Math Reference](#)

</div>

755 words | 5,924 characters | 313 lines

Preview

Welcome to Online Markdown Editor! ✨

Transform your technical writing with our advanced markdown editor - featuring LaTeX math support, code syntax highlighting, and instant preview.

Technical Writing Features

Mathematical Expressions

Our editor supports comprehensive LaTeX math syntax:

Inline equation: $E = mc^2$

Display equations:

\begin{align*} \frac{d}{dx}e^x &= e^x \\ \int_a^b f(x)dx &= F(b) - F(a) \\ \sum_{i=1}^n i &= \frac{n(n+1)}{2} \end{align*}

Matrix operations:

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Code Syntax Highlighting

Multiple language support:

def calculate_complexity(n):
    """Calculate time complexity."""
    operations = 0
    for i in range(n):
        for j in range(n):
            operations += 1
    return operations

print(calculate_complexity(10))

// API request example
async function fetchData() {
  try {
    const response = await fetch('api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

Technical Documentation Tables

Operation	Time Complexity	Space Complexity
Search	$O(\log n)$	$O(1)$
Insert	$O(1)$	$O(n)$
Delete	$O(n)$	$O(1)$

Advanced Math Examples

Complex calculus:

\lim_{h \to 0} \frac{f(x + h) - f(x)}{h} = f'(x)

Statistical formulas:

\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^N (x_i - \mu)^2}

Code Documentation

interface DataStructure<T> {
  /** Add element to collection */
  add(item: T): void;
  
  /** Remove element from collection */
  remove(item: T): boolean;
  
  /** Check if element exists */
  contains(item: T): boolean;
}

Technical Notes

Important: LaTeX expressions must be properly escaped in markdown. Use $...$ for inline math and $$...$$ for display math.

Quick Reference

Math Symbols
- Greek Letters: $\alpha$ , $\beta$ , $\gamma$
- Operators: $\sum$ , $\prod$ , $\int$
- Relations: $\subset$ , $\approx$ , $\equiv$
Code Features
- Syntax highlighting
- Line numbers
- Code folding
Table Support
- Column alignment
- Complex formatting
- Math in tables

Additional Features

Advanced LaTeX Examples

\begin{cases} x & \text{if } x \geq 0 \\ -x & \text{if } x < 0 \end{cases}

Vector calculus:

\nabla \times \mathbf{F} = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial}{\partial x} & \frac{\partial}{\partial y} & \frac{\partial}{\partial z} \\ F_x & F_y & F_z \end{vmatrix}