Uncommon Markdown Tricks Cheatsheet

markdowncheatsheetreference

Definition Lists

markdown
Term
: Definition here

CSS
: Cascading Style Sheets
: A language for styling HTML

Term : Definition here

CSS : Cascading Style Sheets : A language for styling HTML

Footnotes

markdown
Here is a claim[^1] and another[^longnote].

[^1]: Short footnote.
[^longnote]: Multi-paragraph footnote.

    Indent subsequent paragraphs by 4 spaces.

Abbreviations

markdown
The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

Hover over the abbreviation and it expands (processor-dependent).

Task Lists with Indentation

markdown
- [x] Ship v1
- [ ] Write docs
  - [x] API reference
  - [ ] Tutorial
    - [ ] Nested sub-task

Collapsed Sections (HTML <details>)

markdown
<details>
<summary>Click to expand</summary>

Any **Markdown** content here. Must have a blank line after `<summary>`.

| Column A | Column B |
|----------|----------|
| works    | inside   |

</details>
Live example

This is hidden until clicked.

Heading IDs (Custom Anchors)

markdown
## My Section {#custom-id}

Link to it: [jump](#custom-id)

Superscript / Subscript

markdown
H~2~O          <!-- subscript (some processors) -->
E = mc^2^      <!-- superscript (some processors) -->

<!-- Universal fallback -->
H<sub>2</sub>O
x<sup>2</sup>

Highlight / Mark

markdown
==highlighted text==

<!-- Fallback -->
<mark>highlighted text</mark>

Escaping Inside Code Spans

Use double backticks to include a literal backtick:

markdown
`` `backtick` inside code ``

Renders: `backtick` inside code

Multi-line Table Cells (Pipe Tables)

markdown
| Feature | Description |
|---------|-------------|
| A       | Line one<br>Line two<br>Line three |
markdown
![alt](image.png "Tooltip title")

<!-- Linked image -->
[![alt](image.png)](https://example.com)

<!-- HTML for size control -->
<img src="image.png" width="300" alt="sized image">
markdown
Read the [Astro docs][astro] or the [MDX spec][mdx].

[astro]: https://docs.astro.build "Astro Documentation"
[mdx]: https://mdxjs.com

You can also use implicit labels:

markdown
Check [Astro Docs].

[Astro Docs]: https://docs.astro.build

Diff / Language-specific Code Blocks

markdown
```diff
- const old = true;
+ const updated = true;
```

```bash{3}
echo "line 1"
echo "line 2"
echo "this line is highlighted"  # syntax varies by renderer
```

Emoji Shortcodes

markdown
:rocket: :white_check_mark: :warning:

Processor-dependent (works in GitHub, many Astro remark plugins).

Automatic Linking Suppression

markdown
`https://example.com`        <!-- inside code: not linked -->
<https://example.com>        <!-- explicit autolink -->
\https://example.com         <!-- escaped: not linked (some parsers) -->

Line Breaks Without Double Space

markdown
Line one\
Line two

<!-- or the classic trailing-two-spaces -->
Line one··
Line two

The backslash \ is the explicit, visible way.

Blockquote Nesting and Attribution

markdown
> First level
>> Nested quote
>>> Third level

> "Design is not just what it looks like."
>
> — Steve Jobs

Combining HTML Attributes

When your Markdown processor supports {...} attribute syntax:

markdown
![photo](pic.jpg){.rounded .shadow width=400}

> A styled quote {.callout .warning}

Math (KaTeX / MathJax)

markdown
Inline: $E = mc^2$

Block:
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Requires remark-math + rehype-katex in Astro.

Table Alignment

markdown
| Left | Center | Right |
|:-----|:------:|------:|
| a    |   b    |     c |

The colon position controls alignment.

Admonitions (remark-directive)

markdown
:::note
Standard note content.
:::

:::tip[Pro Tip]
Custom title admonition.
:::

:::danger
Critical warning.
:::

Requires remark-directive + a handler plugin in Astro.