markdown reference

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

markdown

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

lists

unordered

markdown

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

first item
second item
- nested item
third item

ordered

markdown

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

first step
second step
third step

task lists

markdown

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

uncompleted task
completed task
another pending item

blockquotes

markdown

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

this is a blockquote. it can span multiple lines.

horizontal rules

---

code blocks

markdown

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

javascript

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

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

mermaid diagrams

markdown

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

Loading diagram...

flowcharts

Loading diagram...

sequence diagrams

Loading diagram...

entity relationship diagrams

Loading diagram...

admonitions

note

markdown

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

tip

markdown

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

important

markdown

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

warning

markdown

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

caution

markdown

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

custom titles

markdown

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

images

markdown

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

image carousels

consecutive images automatically group into a scrollable carousel:

markdown

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

extended media syntax

videos

markdown

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

gifs

markdown

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

link embeds

markdown

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

tables

markdown

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

feature	syntax	example
bold	`text`	bold
italic	`text`	italic
code	`code`	`code`

collapsible sections

markdown

<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

element	syntax
bold	`text`
italic	`text`
strikethrough	`~~text~~`
code	`code`
link	`[text](url)`
image	`![alt](url)`
heading	`## heading`
quote	`> quote`
list	`- item`
ordered list	`1. item`
task list	`- [ ] task`
table	`
code block	```
mermaid	```mermaid
note	`> [!NOTE]`
video	`@video[caption](url)`
gif	`@gif[caption](url)`
embed	`@embed[title](url)`
component	`@component[Name]`
collapsible	`<details>`

react components

embed interactive React components directly in posts:

markdown

@component[PixelLoader]
@component[PixelLoaderDemo]

pixel-loader

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

markdown

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

available components: PixelLoader, PixelLoaderDemo, PixelLoaderAdjacencyDemo