markdown reference

Legacy This WFD was imported from old blog posts scattered across my files. It may still be relevant or it may not. Kept for the record.

reference for markdown features and custom syntax available for blog posts.

text formatting

bold **bold**

italic *italic*

bold and italic ***bold and italic***

strikethrough ~~strikethrough~~

inline code `code`

link [text](url)

headings

## heading 2
### heading 3
#### heading 4

lists

unordered

- first item
- second item
  - nested item
- third item

• first item
• second item
  • nested item
• third item

ordered

1. first step
2. second step
3. third step

1. first step
2. second step
3. third step

task lists

- [ ] uncompleted task
- [x] completed task
- [ ] another pending item

• uncompleted task
• completed task
• another pending item

blockquotes

> this is a blockquote.
> it can span multiple lines.

this is a blockquote. it can span multiple lines.

horizontal rules

---

---

code blocks

```javascript
function hello() {
  console.log("hello, world!");
}
```

function hello() {
  console.log("hello, world!");
}

supported languages: javascript, typescript, tsx, jsx, python, css, html, json, bash, markdown, and more.

mermaid diagrams

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

flowcharts

flowchart LR
    A[Input] --> B[Process]
    B --> C[Output]

sequence diagrams

sequenceDiagram
    participant User
    participant Server
    User->>Server: Request
    Server-->>User: Response

entity relationship diagrams

erDiagram
    USER ||--o{ POST : writes
    POST ||--|{ COMMENT : has
    USER ||--o{ COMMENT : writes

admonitions

note

> [!NOTE]
> useful information that users should know.

useful information that users should know, even when skimming content.

tip

> [!TIP]
> helpful advice for doing things better.

helpful advice for doing things better or more easily.

important

> [!IMPORTANT]
> key information users need to know.

key information users need to know to achieve their goal.

warning

> [!WARNING]
> urgent info that needs immediate attention.

urgent info that needs immediate user attention to avoid problems.

caution

> [!CAUTION]
> advises about risks or negative outcomes.

advises about risks or negative outcomes of certain actions.

custom titles

> [!NOTE/Custom Title Here]
> content with a custom title.

Custom Title Here content with a custom title instead of the default.

images

![alt text description](https://example.com/image.jpg)

image carousels

consecutive images automatically group into a scrollable carousel:

![first image caption](image1.jpg)
![second image caption](image2.jpg)
![third image caption](image3.jpg)

extended media syntax

videos

@video[Video caption](https://example.com/video.mp4)

gifs

@gif[GIF description](https://example.com/animation.gif)

link embeds

@embed[Link title](https://example.com)

tables

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

collapsible sections

<details>
<summary>click to expand</summary>

hidden content goes here.

</details>

hidden content goes here. supports any markdown:

• lists work fine
• bold text renders correctly
• even code: const x = 1

function secret() {
  return "this was hidden!";
}

quick reference

react components

embed interactive React components directly in posts:

@component[PixelLoader]
@component[PixelLoaderDemo]

components render in a macOS-style frame. Props can be passed as JSON:

@component[ComponentName]({"prop": "value", "count": 5})

available components: PixelLoader, PixelLoaderDemo, PixelLoaderAdjacencyDemo