awesome-copilot/skills/markdown-to-html/references/basic-markdown-to-html.md

Basic Markdown to HTML

Headings

Markdown

# Basic writing and formatting syntax

Parsed HTML

<h1>Basic writing and formatting syntax</h1>

## Headings

<h2>Headings</h2>

### A third-level heading

<h3>A third-level heading</h3>

Markdown

Heading 2
---

Parsed HTML

<h2>Heading 2</h2>

---

Paragraphs

Markdown

Create sophisticated formatting for your prose and code on GitHub with simple syntax.

Parsed HTML

<p>Create sophisticated formatting for your prose and code on GitHub with simple syntax.</p>

---

Inline Formatting

Bold

**This is bold text**

<strong>This is bold text</strong>

---

Italic

_This text is italicized_

<em>This text is italicized</em>

---

Bold + Italic

***All this text is important***

<strong><em>All this text is important</em></strong>

---

Strikethrough (GFM)

~~This was mistaken text~~

<del>This was mistaken text</del>

---

Subscript / Superscript (raw HTML passthrough)

This is a <sub>subscript</sub> text

<p>This is a <sub>subscript</sub> text</p>

This is a <sup>superscript</sup> text

<p>This is a <sup>superscript</sup> text</p>

---

Blockquotes

Markdown

> Text that is a quote

Parsed HTML

<blockquote>
  <p>Text that is a quote</p>
</blockquote>

---

GitHub Alert (NOTE)

> [!NOTE]
> Useful information.

<blockquote class="markdown-alert markdown-alert-note">
  <p><strong>Note</strong></p>
  <p>Useful information.</p>
</blockquote>

⚠️ The markdown-alert-* classes are GitHub-specific, not standard Markdown.

---

Inline Code

Use `git status` to list files.

<p>Use <code>git status</code> to list files.</p>

---

Code Blocks

Markdown

```markdown
git status
git add
```

Parsed HTML

<pre><code class="language-markdown">
git status
git add
</code></pre>

---

Tables

Markdown

| Style | Syntax |
|------|--------|
| Bold | ** ** |

Parsed HTML

<table>
  <thead>
    <tr>
      <th>Style</th>
      <th>Syntax</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bold</td>
      <td><strong> </strong></td>
    </tr>
  </tbody>
</table>

---

Links

Markdown

[GitHub Pages](https://pages.github.com/)

Parsed HTML

<a href="https://pages.github.com/">GitHub Pages</a>

---

Images

Markdown

![Alt text](image.png)

Parsed HTML

<img src="image.png" alt="Alt text">

---

Lists

Unordered List

- George Washington
- John Adams

<ul>
  <li>George Washington</li>
  <li>John Adams</li>
</ul>

---

Ordered List

1. James Madison
2. James Monroe

<ol>
  <li>James Madison</li>
  <li>James Monroe</li>
</ol>

---

Nested Lists

1. First item
   - Nested item

<ol>
  <li>
    First item
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ol>

---

Task Lists (GitHub Flavored Markdown)

- [x] Done
- [ ] Pending

<ul>
  <li>
    <input type="checkbox" checked disabled> Done
  </li>
  <li>
    <input type="checkbox" disabled> Pending
  </li>
</ul>

---

Mentions

@github/support

<a href="https://github.com/github/support" class="user-mention">@github/support</a>

---

Footnotes

Markdown

Here is a footnote[^1].

[^1]: My reference.

Parsed HTML

<p>
  Here is a footnote
  <sup id="fnref-1">
    <a href="#fn-1">1</a>
  </sup>.
</p>

<section class="footnotes">
  <ol>
    <li id="fn-1">
      <p>My reference.</p>
    </li>
  </ol>
</section>

---

HTML Comments (Hidden Content)

<!-- This content will not appear -->

<!-- This content will not appear -->

---

Escaped Markdown Characters

\*not italic\*

<p>*not italic*</p>

---

Emoji

:+1:

<img class="emoji" alt="👍" src="...">

(GitHub replaces emoji with <img> tags.)

---