Markdown is a powerful tool for writing content, but sometimes standard formatting isn’t enough. You might want to change font families, add colors, or create unique layouts. In this guide, we’ll explore how to push the boundaries of Markdown in Astro.

1. Standard Markdown Styling

Let’s start with the basics. Astro supports all standard Markdown syntax out of the box.

Headings

Headings are crucial for structure.

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting

Emphasis and importance.

**Bold Text**
*Italic Text*
***Bold and Italic***
~~Strikethrough~~

Bold Text Italic Text Bold and Italic Strikethrough

Lists

Organize your thoughts.

Unordered List:

- Item 1
- Item 2
  - Sub-item A
  - Sub-item B

• Item 1
• Item 2
  • Sub-item A
  • Sub-item B

Ordered List:

1. First Step
2. Second Step
3. Third Step

1. First Step
2. Second Step
3. Third Step

Blockquotes

For highlighting quotes or important notes.

> This is a blockquote.
>
> It can span multiple lines.

This is a blockquote.

It can span multiple lines.

---

2. Advanced HTML & CSS Styling

Since MDX allows us to use HTML directly, we can apply inline styles to achieve specific looks that standard Markdown doesn’t support.

Custom Fonts

You can change the font family for specific sections of text using the style attribute.

<span style="font-family: 'Courier New', monospace;">This is Monospace text.</span>
<span style="font-family: 'Georgia', serif;">This is Serif text.</span>
<span style="font-family: 'Comic Sans MS', cursive;">This is Cursive text.</span>
<span style="font-family: 'Impact', sans-serif;">This is Impact text.</span>

This is Monospace text.
This is Serif text.
This is Cursive text.
This is Impact text.

Text Colors

Add some splash of color to your content.

<span style="color: #ef4444;">Red Text</span>
<span style="color: #3b82f6;">Blue Text</span>
<span style="color: #10b981;">Green Text</span>
<span style="color: #f59e0b;">Amber Text</span>

Red Text
Blue Text
Green Text
Amber Text

Background Colors & Highlights

You can also change the background color.

<span style="background-color: #fef3c7; color: #92400e; padding: 0.2rem 0.4rem; border-radius: 4px;">Highlighted text</span>

Highlighted text

Font Sizes

Adjust the size of your text for emphasis.

<span style="font-size: 0.8rem;">Small Text</span>
<span style="font-size: 1.2rem;">Large Text</span>
<span style="font-size: 1.5rem;">Extra Large Text</span>

Small Text
Large Text
Extra Large Text

---

3. Custom Components in MDX

One of the best features of Astro and MDX is the ability to use custom components or complex HTML structures.

The “Scribble” Effect

We can use the custom classes defined in our global CSS to create hand-drawn effects.

<div class="scribble-box">
  <h3>Hand-Drawn Box</h3>
  <p>This box looks like it was drawn with a marker!</p>
</div>

Highlight Animation

This is a <span class="scribble-highlight">highlighted</span> word.

This is a highlighted word.

Circle Emphasis

Don't forget to <span class="scribble-circle">circle</span> the important parts.

Don’t forget to circle the important parts.

---

4. Code Blocks

Displaying code is essential for technical blogs.

// This is a code block
function helloWorld() {
  console.log("Hello, World!");
}

You can also specify the language for syntax highlighting:

```python
def hello_world():
    print("Hello, World!")
```

---

Conclusion

By combining standard Markdown with HTML and CSS, you can create rich, visually appealing content in your Astro blog. Experiment with different styles to find what works best for your brand!