>

📖 Syntax Guide

Everything you can do with OpenDocsMD

Basic Formatting

Standard text formatting options.

Markdown
**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
==Highlighted text==
Result

Bold text

Italic text

Bold and italic

Strikethrough

Highlighted text

Headings

Six levels of headings are available.

Markdown
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Result

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Unordered and ordered lists, including nested lists.

Markdown
- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

1. First item
2. Second item
3. Third item
Result
  • Item 1
  • Item 2
    • Nested item
    • Another nested
  • Item 3
  1. First item
  2. Second item
  3. Third item

Code Blocks

Inline code and fenced code blocks with syntax highlighting.

Markdown
Inline `code` in text.

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

```python
def greet(name):
    print(f"Hello, {name}!")
```
Result

Inline code in text.

Code blocks display with syntax highlighting, line numbers, and a copy button.

Supported Languages

Common languages include: javascript, typescript, python, java, c, cpp, csharp, go, rust, ruby, php, swift, kotlin, sql, html, css, json, yaml, bash, shell, markdown, and many more.

Tables

Create tables with optional alignment.

Markdown
| Left | Center | Right |
|:-----|:------:|------:|
| L1   |   C1   |    R1 |
| L2   |   C2   |    R2 |
| L3   |   C3   |    R3 |
Result
LeftCenterRight
L1C1R1
L2C2R2
L3C3R3

Blockquotes

Quote text with optional nesting.

Markdown
> This is a blockquote.
>
> It can span multiple lines.

> Nested quotes:
>> Are also possible
>>> Even deeper
Result

This is a blockquote.

It can span multiple lines.

Nested quotes:

Are also possible

Even deeper

Callouts (Admonitions)

Obsidian-style callouts for highlighting important information.

Markdown
> [!NOTE]
> Useful information.

> [!TIP]
> Helpful advice.

> [!WARNING]
> Important warning.

> [!DANGER]
> Critical alert!

> [!NOTE] Custom Title
> With a custom title.
Available Types

NOTE TIP INFO WARNING DANGER ERROR SUCCESS QUESTION FAILURE BUG EXAMPLE QUOTE ABSTRACT IMPORTANT

Callout Examples

Note
Useful information.
Tip
Helpful advice.
Warning
Important warning.
Danger
Critical alert!
Success
Task completed!
Question
Something to consider.

Mermaid Diagrams

Create diagrams and flowcharts using Mermaid syntax.

Flowchart

Markdown
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Cancel]
    C --> E[End]
    D --> E
```
Result
graph TD A[Start] --> B{Decision} B -->|Yes| C[OK] B -->|No| D[Cancel] C --> E[End] D --> E

Sequence Diagram

Markdown
```mermaid
sequenceDiagram
    Alice->>Bob: Hello!
    Bob-->>Alice: Hi!
    Alice->>Bob: How are you?
    Bob-->>Alice: Great!
```
Result
sequenceDiagram Alice->>Bob: Hello! Bob-->>Alice: Hi! Alice->>Bob: How are you? Bob-->>Alice: Great!

Pie Chart

Markdown
```mermaid
pie title Browser Share
    "Chrome" : 65
    "Firefox" : 15
    "Safari" : 12
    "Other" : 8
```
Result
pie title Browser Share "Chrome" : 65 "Firefox" : 15 "Safari" : 12 "Other" : 8

More Diagram Types

Mermaid supports many more diagram types: classDiagram, stateDiagram, erDiagram, gantt, journey, gitGraph, and more. See the Mermaid documentation for details.

Math Equations

Write mathematical equations using LaTeX syntax, powered by KaTeX.

Inline Math

Use single dollar signs for inline equations.

Markdown
The equation $E = mc^2$ revolutionized physics.

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.
Result

The equation revolutionized physics.

The quadratic formula is .

Block Math

Use double dollar signs for centered block equations.

Markdown
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
Result

More Examples

Markdown
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

$$
\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}
$$
Result

Common Symbols

Syntax Result Description
\alpha, \beta, \gammaGreek letters
\sum, \prod, \intSum, product, integral
\frac{a}{b}Fractions
x^2, x_iSuperscript, subscript
\sqrt{x}, \sqrt[n]{x}Square root, nth root
\leq, \geq, \neqComparisons
\infty, \partialInfinity, partial
\vec{v}, \hat{i}Vectors, unit vectors

See the KaTeX documentation for all supported functions.

Plots

Write JavaScript programs to create interactive 2D and 3D visualizations. Use ```plot code blocks. Your code runs with math functions and plotting helpers pre-loaded. Set traces to an array of Plotly trace objects.

Basic Examples

2D Line Plot
```plot
// Plot y = sin(x) from -10 to 10
traces = [line(x => sin(x), [-10, 10])]
```
3D Surface
```plot
// Plot z = sin(x) * cos(y)
traces = [surface((x, y) => sin(x) * cos(y))]
```

Multiple Traces

Markdown
```plot
// Compare trig functions
traces = [
  line(x => sin(x), [-10, 10], {name: 'sin(x)'}),
  line(x => cos(x), [-10, 10], {name: 'cos(x)'}),
  line(x => tan(x)/5, [-10, 10], {name: 'tan(x)/5'})
]
```
Result

2D Helper Functions

FunctionDescriptionExample
line(fn, xRange, options)Line from y = f(x)line(x => x*x, [-5, 5])
scatter(points, options)Scatter plotscatter([[1,2], [3,4]])
polyline(points, options)Connected pointspolyline([[0,0], [1,1], [2,0]])
bar(labels, values, options)Bar chartbar(['A','B','C'], [10,20,15])
parametric2d(fx, fy, tRange, steps)Parametric curveparametric2d(t=>cos(t), t=>sin(t))
circle(radius, center, options)Circlecircle(2, [0, 0])
ellipse(a, b, center, options)Ellipseellipse(3, 2, [0, 0])
arc(radius, start, end, center)Circular arcarc(1, 0, PI/2, [0, 0])
rect(width, height, center, options)Rectanglerect(4, 2, [0, 0], {fill: true})
polygon(vertices, options)Closed polygonpolygon([[0,0], [1,2], [2,0]])
arrow(start, end, options)2D arrow/vectorarrow([0,0], [2, 1])
pie(labels, values, options)Pie chartpie(['A','B','C'], [30,50,20])
heatmap(z, options)2D heatmapheatmap([[1,2],[3,4]])

3D Helper Functions

FunctionDescriptionExample
surface(fn, xRange, yRange)Surface z=f(x,y)surface((x,y) => sin(x)*cos(y))
parametric(fx, fy, fz, tRange, steps)3D parametric curveparametric(t=>cos(t), t=>sin(t), t=>t)
parametricSurface(fx, fy, fz, uRange, vRange)Parametric surfaceparametricSurface((u,v)=>..., ...)
sphere(radius, center, options)Colored spheresphere(1.5, [0,0,0], {color: '#1e90ff'})
cylinder(radius, height, center, options)Cylindercylinder(1, 3, [0,0,0])
cone(radius, height, center, options)Conecone(1, 2, [0,0,0])
box(width, height, depth, center)3D box/cubebox(2, 2, 2, [0,0,0])
torus(R, r, center, options)Torus (donut)torus(2, 0.5, [0,0,0])
plane(width, height, center)Flat planeplane(4, 4, [0,0,0])
scatter3d(points, options)3D scatter plotscatter3d([[1,2,3], [4,5,6]])
line3d(points, options)3D line pathline3d([[0,0,0], [1,1,1]])
arrow3d(start, end, options)3D arrow/vectorarrow3d([0,0,0], [1,1,1])
helix(radius, pitch, turns, center)3D helix spiralhelix(1, 0.5, 3, [0,0,0])

Utility Functions

FunctionDescriptionExample
range(start, end, step)Number sequencerange(0, 10, 0.5)
linspace(start, end, n)N evenly spaced numberslinspace(-5, 5, 100)
meshgrid(xs, ys)2D coordinate gridmeshgrid(linspace(-2,2,20), linspace(-2,2,20))

Math (pre-loaded)

PI, E, sin, cos, tan, asin, acos, atan, sinh, cosh, tanh, sqrt, exp, log, log10, log2, abs, pow, floor, ceil, round, sign, min, max, random

Examples

Sphere with Orbit

Markdown
```plot
// Planet with inclined orbit
traces = [
  sphere(1, [0,0,0], {color: '#1e90ff'}),
  parametric(
    t => 2*cos(t),
    t => 2*sin(t)*cos(0.4),
    t => 2*sin(t)*sin(0.4),
    [0, 2*PI], 200
  )
]
```
Result

Custom Plotly Traces

For full control, build raw Plotly.js trace objects:

```plot
// Custom scatter3d trace
traces = [{
  type: 'scatter3d',
  mode: 'lines+markers',
  x: range(0, 10, 0.1).map(t => cos(t)),
  y: range(0, 10, 0.1).map(t => sin(t)),
  z: range(0, 10, 0.1),
  marker: { size: 2, color: 'red' }
}]
```

Tip: Click and drag to rotate 3D plots, scroll to zoom, right-click to pan!

Content Tabs

MkDocs Material-style tabbed content.

Markdown
=== "Python"
    ```python
    print("Hello, World!")
    ```

=== "JavaScript"
    ```javascript
    console.log("Hello, World!");
    ```

=== "Rust"
    ```rust
    fn main() {
        println!("Hello, World!");
    }
    ```
Result
print("Hello, World!")
console.log("Hello, World!");
println!("Hello, World!");

Keyboard Keys

Display keyboard shortcuts beautifully.

Markdown
Press ++Ctrl+C++ to copy.
Press ++Ctrl+V++ to paste.
Press ++Ctrl+Shift+P++ for palette.

Alternative syntax:
[[Cmd+S]] to save.
[[Alt+Tab]] to switch.
Result

Press Ctrl+C to copy.

Press Ctrl+V to paste.

Press Ctrl+Shift+P for palette.

Alternative syntax:

Cmd+S to save.

Alt+Tab to switch.

Highlighted Text

Mark important text with highlighting.

Markdown
This is ==highlighted text== in a sentence.

You can highlight ==multiple words==
or even ==entire phrases== for emphasis.
Result

This is highlighted text in a sentence.

You can highlight multiple words or even entire phrases for emphasis.

Task Lists

Create checklists and to-do items.

Markdown
- [x] Completed task
- [x] Another done item
- [ ] Pending task
- [ ] Future work
  - [ ] Nested task
  - [x] Nested done
Result
  • Completed task
  • Another done item
  • Pending task
  • Future work
    • Nested task
    • Nested done

Horizontal Rules

Create visual separators.

Markdown
Content above

---

Content below

***

More content

___

Final content
Result

Content above


Content below


More content


Final content

Sharing URLs

Share your documents via URL.

Editor Mode

The default URL opens in editor mode with both the editor and preview visible:

https://your-domain.com/#compressed-content

Viewer Mode

Add ?v to create a read-only viewer link:

https://your-domain.com/?v#compressed-content

How It Works

  • Your content is compressed using DEFLATE algorithm
  • The compressed data is encoded as base64url
  • It's stored in the URL hash (after #)
  • No server needed - everything is client-side!
Tip
Use the "Copy URL" buttons in the editor to get properly formatted sharing links!
Start Writing

Credits & Attributions

Created By

Rounak Paul — Design, development, and maintenance of OpenDocsMD.

Open Source Libraries

OpenDocsMD is built with these amazing open source projects:

Library License Purpose
marked MIT Markdown parsing
pako MIT URL compression (DEFLATE)
highlight.js BSD-3-Clause Code syntax highlighting
marked-highlight MIT Highlight.js integration
Mermaid MIT Diagram rendering
KaTeX MIT LaTeX math rendering
function-plot MIT 2D equation graphing
Plotly.js MIT 3D plotting and visualization
D3.js ISC Data visualization (for plots)
morphdom MIT Efficient DOM updates
html2pdf.js MIT PDF export
github-markdown-css MIT Markdown styling

Fonts

Fonts provided by Google Fonts under the SIL Open Font License and Apache License 2.0:

  • Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono
  • Sans-serif: Inter, Open Sans, Nunito, IBM Plex Sans

License

OpenDocsMD is free to use without any limitations. No account required, no data stored on servers.

© 2026 Rounak Paul. All rights reserved.

[Fan Boy]