📖 Syntax Guide
Everything you can do with OpenDocsMD
Basic Formatting
Standard text formatting options.
**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
==Highlighted text==
Bold text
Italic text
Bold and italic
Strikethrough
Highlighted text
Headings
Six levels of headings are available.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lists
Unordered and ordered lists, including nested lists.
- Item 1
- Item 2
- Nested item
- Another nested
- Item 3
1. First item
2. Second item
3. Third item
- Item 1
- Item 2
- Nested item
- Another nested
- Item 3
- First item
- Second item
- Third item
Links & Images
Add hyperlinks and images to your documents.
[Link text](https://example.com)
[Link with title](https://example.com "Title")

[](https://example.com)
Code Blocks
Inline code and fenced code blocks with syntax highlighting.
Inline `code` in text.
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
}
```
```python
def greet(name):
print(f"Hello, {name}!")
```
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.
| Left | Center | Right |
|:-----|:------:|------:|
| L1 | C1 | R1 |
| L2 | C2 | R2 |
| L3 | C3 | R3 |
| Left | Center | Right |
|---|---|---|
| L1 | C1 | R1 |
| L2 | C2 | R2 |
| L3 | C3 | R3 |
Blockquotes
Quote text with optional nesting.
> This is a blockquote.
>
> It can span multiple lines.
> Nested quotes:
>> Are also possible
>>> Even deeper
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.
> [!NOTE]
> Useful information.
> [!TIP]
> Helpful advice.
> [!WARNING]
> Important warning.
> [!DANGER]
> Critical alert!
> [!NOTE] Custom Title
> With a custom title.
NOTE TIP INFO WARNING DANGER ERROR SUCCESS QUESTION FAILURE BUG EXAMPLE QUOTE ABSTRACT IMPORTANT
Callout Examples
Mermaid Diagrams
Create diagrams and flowcharts using Mermaid syntax.
Flowchart
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
C --> E[End]
D --> E
```
Sequence Diagram
```mermaid
sequenceDiagram
Alice->>Bob: Hello!
Bob-->>Alice: Hi!
Alice->>Bob: How are you?
Bob-->>Alice: Great!
```
Pie Chart
```mermaid
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.
The equation $E = mc^2$ revolutionized physics.
The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.
The equation revolutionized physics.
The quadratic formula is .
Block Math
Use double dollar signs for centered block equations.
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
More Examples
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
$$
\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}
$$
Common Symbols
| Syntax | Result | Description |
|---|---|---|
\alpha, \beta, \gamma | Greek letters | |
\sum, \prod, \int | Sum, product, integral | |
\frac{a}{b} | Fractions | |
x^2, x_i | Superscript, subscript | |
\sqrt{x}, \sqrt[n]{x} | Square root, nth root | |
\leq, \geq, \neq | Comparisons | |
\infty, \partial | Infinity, 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
```plot
// Plot y = sin(x) from -10 to 10
traces = [line(x => sin(x), [-10, 10])]
```
```plot
// Plot z = sin(x) * cos(y)
traces = [surface((x, y) => sin(x) * cos(y))]
```
Multiple Traces
```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'})
]
```
2D Helper Functions
| Function | Description | Example |
|---|---|---|
line(fn, xRange, options) | Line from y = f(x) | line(x => x*x, [-5, 5]) |
scatter(points, options) | Scatter plot | scatter([[1,2], [3,4]]) |
polyline(points, options) | Connected points | polyline([[0,0], [1,1], [2,0]]) |
bar(labels, values, options) | Bar chart | bar(['A','B','C'], [10,20,15]) |
parametric2d(fx, fy, tRange, steps) | Parametric curve | parametric2d(t=>cos(t), t=>sin(t)) |
circle(radius, center, options) | Circle | circle(2, [0, 0]) |
ellipse(a, b, center, options) | Ellipse | ellipse(3, 2, [0, 0]) |
arc(radius, start, end, center) | Circular arc | arc(1, 0, PI/2, [0, 0]) |
rect(width, height, center, options) | Rectangle | rect(4, 2, [0, 0], {fill: true}) |
polygon(vertices, options) | Closed polygon | polygon([[0,0], [1,2], [2,0]]) |
arrow(start, end, options) | 2D arrow/vector | arrow([0,0], [2, 1]) |
pie(labels, values, options) | Pie chart | pie(['A','B','C'], [30,50,20]) |
heatmap(z, options) | 2D heatmap | heatmap([[1,2],[3,4]]) |
3D Helper Functions
| Function | Description | Example |
|---|---|---|
surface(fn, xRange, yRange) | Surface z=f(x,y) | surface((x,y) => sin(x)*cos(y)) |
parametric(fx, fy, fz, tRange, steps) | 3D parametric curve | parametric(t=>cos(t), t=>sin(t), t=>t) |
parametricSurface(fx, fy, fz, uRange, vRange) | Parametric surface | parametricSurface((u,v)=>..., ...) |
sphere(radius, center, options) | Colored sphere | sphere(1.5, [0,0,0], {color: '#1e90ff'}) |
cylinder(radius, height, center, options) | Cylinder | cylinder(1, 3, [0,0,0]) |
cone(radius, height, center, options) | Cone | cone(1, 2, [0,0,0]) |
box(width, height, depth, center) | 3D box/cube | box(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 plane | plane(4, 4, [0,0,0]) |
scatter3d(points, options) | 3D scatter plot | scatter3d([[1,2,3], [4,5,6]]) |
line3d(points, options) | 3D line path | line3d([[0,0,0], [1,1,1]]) |
arrow3d(start, end, options) | 3D arrow/vector | arrow3d([0,0,0], [1,1,1]) |
helix(radius, pitch, turns, center) | 3D helix spiral | helix(1, 0.5, 3, [0,0,0]) |
Utility Functions
| Function | Description | Example |
|---|---|---|
range(start, end, step) | Number sequence | range(0, 10, 0.5) |
linspace(start, end, n) | N evenly spaced numbers | linspace(-5, 5, 100) |
meshgrid(xs, ys) | 2D coordinate grid | meshgrid(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
```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
)
]
```
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.
=== "Python"
```python
print("Hello, World!")
```
=== "JavaScript"
```javascript
console.log("Hello, World!");
```
=== "Rust"
```rust
fn main() {
println!("Hello, World!");
}
```
print("Hello, World!")console.log("Hello, World!");println!("Hello, World!");Keyboard Keys
Display keyboard shortcuts beautifully.
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.
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.
This is ==highlighted text== in a sentence.
You can highlight ==multiple words==
or even ==entire phrases== for emphasis.
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.
- [x] Completed task
- [x] Another done item
- [ ] Pending task
- [ ] Future work
- [ ] Nested task
- [x] Nested done
- Completed task
- Another done item
- Pending task
- Future work
- Nested task
- Nested done
Horizontal Rules
Create visual separators.
Content above
---
Content below
***
More content
___
Final content
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!
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]