blogprojectshajspace
Back to blog

markdown reference

·5 min read

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
  1. first step
  2. second step
  3. 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.
Note

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

tip

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

helpful advice for doing things better or more easily.

important

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

key information users need to know to achieve their goal.

warning

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

urgent info that needs immediate user attention to avoid problems.

caution

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

advises about risks or negative outcomes of certain actions.

custom titles

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

content with a custom title instead of the default.

images

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

a serene landscape at sunset

a serene landscape at sunset
a serene landscape at sunset

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)

mountain vista at dawn

mountain vista at dawn

forest path in autumn

forest path in autumn

coastal cliffs at sunset

coastal cliffs at sunset
mountain vista at dawn

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:

@component[PixelLoader]
@component[PixelLoaderDemo]

@component[PixelLoader]

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

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

available components: PixelLoader, PixelLoaderDemo, PixelLoaderAdjacencyDemo

Back to blog