Complete Markdown Syntax Reference for Astro

This guide covers all Markdown syntax that’s supported in Astro with MDX. Use this as a reference when creating content for your Astro website using Obsidian.

Basic Syntax

Headings

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

Paragraphs and Line Breaks

This is a paragraph.

This is another paragraph.

This line has a line break at the end  
(note the two spaces at the end of the previous line).

Emphasis

*Italic text* or _Italic text_
**Bold text** or __Bold text__
***Bold and italic text*** or ___Bold and italic text___

Lists

Unordered Lists

- Item 1
- Item 2
  - Nested item 2.1
  - Nested item 2.2
- Item 3

Ordered Lists

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

Blockquotes

> This is a blockquote
>
> > This is a nested blockquote

Horizontal Rules

---
***
___

Links and Images

Links

[Link text](https://www.example.com)
[Link with title](https://www.example.com "Link title")

URLs and Email Addresses

<https://www.example.com>
<email@example.com>

Images

![Alt text](/path/to/image.jpg)
![Alt text](/path/to/image.jpg "Image title")

Code

Inline Code

Use `code` in your Markdown file.

Code Blocks

```
This is a code block without syntax highlighting.
```

```javascript
// This is a code block with JavaScript syntax highlighting
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("World");
```

Tables

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

Alignment

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

MDX-Specific Features

Importing Components

import MyComponent from '../components/MyComponent.astro';

# My Markdown Content

<MyComponent prop="value" />

More markdown content...

Using JavaScript Expressions

export const name = "World";

# Hello {name.toUpperCase()}!

The current date is {new Date().toLocaleDateString()}.

Importing and Using React Components

import { Button } from '../components/Button';

# Interactive Components

<Button onClick={() => alert('Hello!')}>
  Click me
</Button>

Astro-Specific Features

Frontmatter

---
title: "My Page Title"
description: "Page description for SEO"
pubDate: "2023-01-01"
author: "Your Name"
image: "/images/featured.jpg"
tags: ["astro", "markdown", "tutorial"]
---

Using Astro Components in MDX

---
// Import components in the frontmatter
import Button from '../components/Button.astro';
import { Counter } from '../components/Counter.jsx';
---

# My MDX Page

<Button>Click me!</Button>

<Counter client:load />

Extended Syntax

Footnotes

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

Strikethrough

~~Strikethrough text~~

Task Lists

- [x] Task 1 (completed)
- [ ] Task 2 (incomplete)
- [ ] Task 3 (incomplete)

Emoji

You can add emoji using colon syntax:

:smile: :heart: :rocket:

Highlight

Depending on your Markdown processor:

==Highlighted text==

Tips for Obsidian and Astro

1. Wikilinks: Obsidian’s [[wikilinks]] aren’t natively supported in Astro, so use standard Markdown links in your content
2. Frontmatter: Always include the required frontmatter (title, description, pubDate) at the top of your markdown files
3. Embeds: Obsidian embeds (![[file]]) don’t work in Astro, use standard Markdown image syntax instead
4. Math: For math equations, you’ll need to add a math library like KaTeX to your Astro site

Math Equations with KaTeX

If you’ve added KaTeX support:

$$
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xi
$$

HTML in Markdown

You can also use HTML directly in your Markdown:

<div style="background-color: #f0f0f0; padding: 10px;">
  <p>This is an HTML block with a <span style="color: red;">styled span</span>.</p>
</div>

This comprehensive reference covers most of the Markdown syntax you’ll need when writing content for your Astro website using Obsidian. Happy writing!