Markdown Features and Syntax Reference Guide

This post serves as the dedicated Markdown Syntax Reference Guide (Cheatsheet) for this site. For easy comparison, every item provides both the original syntax (Syntax) and the actual rendered visual (Result).

1. Text Formatting

The most commonly used text-level emphasis and formatting in daily writing.

Syntax:

- **Bold**
- _Italic_
- **_Bold Italic_**
- ~~Strikethrough~~
- `Inline Code`

Result:

• Bold
• Italic
• Bold Italic
• Strikethrough
• Inline Code

2. Headings

Syntax:

### Heading Level 3 (###)

#### Heading Level 4 (####)

##### Heading Level 5 (#####)

Result:

Heading Level 3 (###)

Heading Level 4 (####)

Heading Level 5 (#####)

3. Blockquotes

Blockquotes are perfect for highlighting quotes, summaries, or paragraphs that require special attention.

Syntax:

> This is a basic blockquote.
> You can continue to use **bold** within the quote.
>
> > You can even create nested blockquotes.

Result:

This is a basic blockquote. You can continue to use bold within the quote.

You can even create nested blockquotes.

4. Lists

Unordered & Ordered Lists

Syntax:

- Apple
- Banana
    - Cavendish

1. Requirements and Design
2. Coding

Result:

• Apple
• Banana
  • Cavendish

1. Requirements and Design
2. Coding

Task Lists

Syntax:

- [x] Complete basic environment setup
- [ ] Write technical blog posts

Result:

• [x] Complete basic environment setup
• [ ] Write technical blog posts

5. Links & Dividers

Syntax:

- [Go to GitHub (External)](https://github.com)
- [Hover for tooltip](https://example.com 'This is a tooltip text')

---

Result:

• Go to GitHub (External)
• Hover for tooltip

6. Images & Media

Inserting Images

Syntax:

![Test Image Logo](/assets/image/logo/page_logo.png)

Result:

Inserting Native Audio (R2 Proxy)

Syntax:

<audio
    controls
    src="/api/media-auth?path=game-audio/writers-block/writers_block_main_ost.m4a"
></audio>

Result:

7. Code Blocks

Syntax:

```css
.feature-box {
    border: 1px solid #ff3366;
}
```

Result:

.feature-box {
    border: 1px solid #ff3366;
}

8. Data Tables

Syntax:

| Feature Name (Left) | Core Tech (Center) | Environment (Right) |
| :------------------ | :----------------: | ------------------: |
| Static Gen (SSG)    |   Eleventy v3.1    |          Build Time |

Result:

9. Collapsible Details

Syntax:

<details>
    <summary>Click to reveal hidden content 💡</summary>
    This is collapsed content.
</details>

Result:

10. Extra HTML Tags

Syntax:

* Highlighter: <mark>highlight</mark> * Keyboard Keys: <kbd>Ctrl</kbd> + <kbd>C</kbd> *
Sub/Superscript: H<sub>2</sub>O, 200 m<sup>2</sup> * Ruby Annotations:
<ruby>漢字<rt>kanji</rt></ruby> * Abbreviation:
<abbr title="HyperText Markup Language">HTML</abbr> * Progress Bar:
<progress value="70" max="100">70%</progress>

Result:

• Highlighter: highlight
• Keyboard Keys: Ctrl + C
• Sub/Superscript: H₂O, 200 m²
• Ruby Annotations: 漢字kanji
• Abbreviation: HTML
• Progress Bar:70%

11. Buttons

Syntax:

<a href="link here" target="_blank">
    <button
        style="padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; background-color: #ff3366; color: white; border: none;"
    >
        Button
    </button>
</a>

Result:
Claim Your Free Prize 🎁

This post is a Markdown feature showcase and syntax cheatsheet.