Writing in Markdown - A Quick Reference

Markdown is plain text that renders as formatted HTML. It’s fast to write, beginner to read, and version-control friendly. Here’s a reference for everything you need.

Headers

Headers consist of information that is not shown to the public user, but instead used by the server to extract some custom information about the page before it rendered. Examples could be to store descriptions, date modified, author, and more. Lets take for instance the header of this page:

---
title: Writing in Markdown — A Quick Reference
date: 2026-03-20
description: A practical guide to markdown syntax — headings, code blocks, tables, blockquotes, and more.
tags: [completed, markdown, beginner, formatting]
author: Blueprint
published: true
---

Headings

# H1 — Page title

## H2 — Section

### H3 — Subsection

#### H4 — Detail

Text Formatting

Syntax	Result
**bold**	bold
*italic*	italic
`inline code`	inline code
~~strikethrough~~	strikethrough

Lists

Unordered:

- Item one
- Item two
  - Nested item
  - Another nested item

which renders as:

• Item one
• Item two
  • Nested item
  • Another nested item

Ordered:

1. First step
2. Second step
3. Third step

which renders as:

1. First step
2. Second step
3. Third step

Code Blocks

Code can be represented as code blocks, or as inline code. For inline code, visit the table above. For code blocks, you need to enclose the code in triple backticks. Here is an example of how to do it:

```java
public static void main(String[] args) {
    System.out.println("Hello, World!");
}
```

which renders as:

public static void main(String[] args) {
    System.out.println("Hello, World!");
}

Fenced code blocks with language tags support syntax highlighting:

function greet(name) {
	return `Hello, ${name}!`;
}

console.log(greet('World'));

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

Blockquotes

> "The best writing is rewriting."
> — E.B. White

which renders as:

“The best writing is rewriting.” — E.B. White

Blockquotes are useful for callouts, quotes, or emphasis.

Links and Images

[Link text](https://example.com)
![Alt text](/assets/markdown/image.png)

Horizontal Rules

Use --- to create a thematic break:

---

Tables

| Column A | Column B | Column C |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Renders as:

Column A	Column B	Column C
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

---

3D Models

To embed interactive 3D models, natively use the <model-viewer> component. It natively supports dragging, zooming, and dynamic shadowing out of the box!

[!WARNING]
Web browsers do NOT natively support .stl format because it is inefficient for web rendering. You MUST convert .stl to .glb or .gltf.

Importing Custom Assets

1. Convert to .glb: If you designed in Fusion 360 or Blender, you can export natively as glTF/GLB. If using Onshape or you have a standalone .stl file, convert it freely using a Model Converter.
2. Move to internal static folder: Place the generated .glb file inside your codebase at static/assets/models/your-mechanism.glb.
3. Reference it: Reference the file inside your markup exactly like this: src="/assets/models/your-mechanism.glb"!

<div
	style="width: 100%; height: 500px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-secondary); margin: 2rem 0;"
>
	<model-viewer
		src="https://modelviewer.dev/shared-assets/models/RobotExpressive.glb"
		alt="A 3D model of a robot mechanism"
		auto-rotate
		camera-controls
		style="width: 100%; height: 100%; background-color: transparent;"
		shadow-intensity="1"
	>
	</model-viewer>
</div>

---

That covers practically everything you’ll ever need. Now go write something!