Markdown Basics

Quick reference for the most commonly used markdown syntax in this site.

Text Formatting

**bold text**
_italic text_
**_bold and italic_**
~~strikethrough~~
`inline code`

Results in: bold text, italic text, bold and italic, ~~strikethrough~~, inline code

Headings

## Section Heading

### Subsection

#### Minor Section

Links

[Link text](https://example.com)
[Wiki page](/wiki/page-slug)
[Blog post](/blog/post-slug)

Lists

Unordered Lists

- First item
- Second item
- Nested item
- Another nested item
- Third item

Ordered Lists

1. First step
2. Second step
 1. Sub-step A
 2. Sub-step B
3. Third step

Task Lists

- [x] Completed task
- [ ] Pending task
- [ ] Another pending task

Code Blocks

Basic Code Block

```javascript
const greeting = 'Hello World';
console.log(greeting);
```

With Filename

example.js markdown

```javascript filename="example.js"
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
```

With Line Highlighting

```javascript filename="app.js" {2,4-6}
const express = require('express');
const app = express(); // This line is highlighted

app.get('/', (req, res) => {
// These lines
res.send('Hello World!'); // are also
}); // highlighted

app.listen(3000);
```

Results in:

app.js javascript

const express = require('express');
const app = express(); // This line is highlighted

app.get('/', (req, res) => {
// These lines
res.send('Hello World!'); // are also
}); // highlighted

app.listen(3000);

Inline Code

Use single backticks for inline code: npm install astro

Blockquotes

> This is a blockquote.
> It can span multiple lines.
>
> And include multiple paragraphs.

This is a blockquote. It can span multiple lines.

And include multiple paragraphs.

Images

Basic Images

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

Images with Captions

For images that need captions, use the Figure component in MDX files:

blog-post.mdx jsx

import Figure from '@components/ui/Figure.astro';
import bookPhoto from '@assets/images/books.png';

<Figure
src={bookPhoto}
alt="Collection of programming books"
caption="My collection of O'Reilly books from the early 2000s"
width={800}
/>

This provides proper semantic HTML with <figure> and <figcaption> elements, better accessibility, and consistent styling.

Tables

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

Column 1	Column 2	Column 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Horizontal Rule

Use three or more hyphens:

---

Math (in MDX files)

Inline math: $E = mc^2$

Block math:

\frac{a}{b} = c

MDX Features

Since this is an MDX file, you can also use React/Astro components. For example, you could import and use custom components for more complex content.