---

title: "Markdown Reference Guide for iBuyToys Blog" date: "2025-04-01" excerpt: "A comprehensive guide to formatting blog posts using Markdown and MDX in the iBuyToys blog system." coverImage: "/api/blog-content/markdown-reference-guide/cover.jpg" author: name: "iBuyToys Editorial Team" picture: "/images/authors/editorial-team.jpg" tags:

• "reference"
• "markdown"
• "blogging"
• "tutorial"

---

Markdown Reference Guide for iBuyToys Blog

Welcome to our comprehensive markdown reference guide for the iBuyToys blog system. This post serves as a template and reference for creating beautifully formatted blog posts using Markdown and MDX.

Table of Contents

1. Basic Text Formatting
2. Headings
3. Lists
4. Links
5. Images
6. Videos
7. Blockquotes
8. Code Blocks
9. Tables
10. Special MDX Components

Basic Text Formatting

Markdown makes it easy to format text. Here are some basic examples:

Bold text is created using double asterisks: **Bold text**

Italic text is created using single asterisks: *Italic text*

Bold and italic text is created using triple asterisks: ***Bold and italic text***

~~Strikethrough text~~ is created using double tildes: ~~Strikethrough text~~

You can also create links and add footnotes[^1].

[^1]: This is a footnote example.

---

Horizontal rules (like the one above) are created using three hyphens: ---

Headings

Markdown supports six levels of headings, which are created using hash symbols:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6

Lists

Unordered Lists

You can create unordered lists using asterisks, plus signs, or hyphens:

• Item 1
• Item 2
  • Subitem 2.1
  • Subitem 2.2
• Item 3

* Item 1
* Item 2
  * Subitem 2.1
  * Subitem 2.2
* Item 3

Ordered Lists

You can create ordered lists using numbers:

1. First item
2. Second item
   1. Subitem 2.1
   2. Subitem 2.2
3. Third item

1. First item
2. Second item
   1. Subitem 2.1
   2. Subitem 2.2
3. Third item

Task Lists

You can create task lists using brackets:

• [x] Completed task
• [ ] Incomplete task
• [ ] Another task

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task

Links

Basic Links

You can create inline links using square brackets for the link text and parentheses for the URL:

[iBuyToys](https://www.iBuyToys.com)

Reference Links

You can also create reference links which are defined elsewhere in the document:

[reference link][ref-link]

[ref-link]: https://www.iBuyToys.com

Internal Links

You can link to other sections within your document:

[Link to Headings section](#headings)

Images

Basic Image

Here's how to add a basic image:

![LEGO Classic Set](/api/blog-content/markdown-reference-guide/lego-classic.jpg)

Image with Title

You can add a title that appears when hovering over the image:

![LEGO Minifigures](/api/blog-content/markdown-reference-guide/minifigures.jpg "LEGO Minifigures Collection")

Image with Link

You can make an image clickable by combining image and link syntax:

[![STEM Toy Set](/api/blog-content/markdown-reference-guide/stem-toy.jpg)](https://www.iBuyToys.com/category/stem-toys)

Image with Custom Styling (using MDX)

You can add custom styling to images using HTML attributes in MDX:

<img
  src="/api/blog-content/markdown-reference-guide/robot-toy.jpg"
  alt="Programmable Robot Toy"
  width="300"
  height="200"
  style={{ borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}
/>

Videos

YouTube Embed

You can embed YouTube videos using an iframe:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

Vimeo Embed

Similarly, you can embed Vimeo videos:

<iframe
  src="https://player.vimeo.com/video/76979871"
  width="560"
  height="315"
  frameBorder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowFullScreen
></iframe>

Video with Thumbnail Link

You can also use an image as a thumbnail that links to a video:

[![Watch our toy review video](/api/blog-content/markdown-reference-guide/video-thumbnail.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

Blockquotes

You can create blockquotes using the greater-than symbol:

This is a blockquote.

It can span multiple lines.

You can also nest blockquotes.

> This is a blockquote.
>
> It can span multiple lines.
>
> > You can also nest blockquotes.

Code Blocks

Inline Code

You can add inline code using backticks:

`inline code`

Fenced Code Blocks

You can create code blocks with syntax highlighting by specifying the language:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('iBuyToys Customer');

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('iBuyToys Customer');
```

Code Blocks with Highlighting

Our blog system supports syntax highlighting for various languages:

def calculate_discount(price, percentage):
    """Calculate the discounted price."""
    discount = price * (percentage / 100)
    return price - discount

original_price = 49.99
discount_percentage = 20
final_price = calculate_discount(original_price, discount_percentage)
print(f"Original price: ${original_price}")
print(f"After {discount_percentage}% discount: ${final_price:.2f}")

Tables

You can create tables using pipes and hyphens:

| Product | Price | Rating | |---------------|--------|--------| | LEGO Classic | $29.99 | ★★★★★ | | Barbie House | $99.99 | ★★★★☆ | | Nerf Blaster | $24.99 | ★★★★☆ | | Puzzle Set | $19.99 | ★★★☆☆ |

| Product       | Price  | Rating |
|---------------|--------|--------|
| LEGO Classic  | $29.99 | ★★★★★  |
| Barbie House  | $99.99 | ★★★★☆  |
| Nerf Blaster  | $24.99 | ★★★★☆  |
| Puzzle Set    | $19.99 | ★★★☆☆  |

You can also align columns:

| Left-aligned | Center-aligned | Right-aligned | |:-------------|:--------------:|-------------:| | Left | Center | Right | | aligned | aligned | aligned |

| Left-aligned | Center-aligned | Right-aligned |
|:-------------|:--------------:|-------------:|
| Left         | Center         | Right        |
| aligned      | aligned        | aligned      |

Special MDX Components

Our blog system includes special MDX components that you can use to enhance your posts.

Product Link Component

Use the ProductLink component to link to products with proper styling and tracking:

LEGO Classic Creative Box

<ProductLink asin="B07W6QBNM5">LEGO Classic Creative Box</ProductLink>

Alert Component

Use the Alert component to highlight important information:

<Alert title="Note" variant="warning">
  This is an important note for readers.
</Alert>

You can use different variants:

Price Comparison Component

Use the PriceComparison component to compare prices across retailers:

<PriceComparison 
  items={[
    { retailer: "Amazon", price: "$29.99" },
    { retailer: "Walmart", price: "$32.99" },
    { retailer: "Target", price: "$34.99" }
  ]}
/>

Conclusion

This reference guide covers most of the markdown formatting options available for your iBuyToys blog posts. By combining these elements, you can create rich, engaging content that looks professional and is easy to read.

Remember to:

• Use headings to organize your content
• Include relevant images with proper alt text
• Link to related products using the ProductLink component
• Format code examples with proper syntax highlighting
• Use tables for comparing products or features

For any questions about formatting or the blog system, refer to the README in the content/blog directory or contact the iBuyToys editorial team.

Happy blogging!