Markdown Cheat Sheet

Just putting this here for my own reference, really

What's Markdown?

Markdown is a nice, quick and easy method to add style to web text. You have the power to customize a document's appearance. You can format words, incorporate images, generate lists, etc.

Essentially, Markdown consists of standard text combined with a small number of non-alphabetic symbols, like # or *, to achieve these formatting options.

Taken from here.¹

Syntax guide

Below is a summary of Markdown syntax that we can use across github or in our personal text files.

Headers

# This is a header one
 
## This is a header two
 
#### This is a header four

This is a header one

This is a header two

This is a header four

Emphasis

_This text will be italic_
 
**This text will be bold**
 
_You **can totally** mix them up_

This text will be italic

This text will be bold

You **can totally ** mix them up

Lists

Unordered

- Item 1
- Item 2
  - Item 2a
  - Item 2b

Item 1
Item 2
- Item 2a
- Item 2b

Ordered

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

Item 1
Item 2
Item 3
1. Item 3a
2. Item 3b

Images

![github logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Format: ![Alt Text](url)

github logo

Links

http://github.com - automatic!
[github](http://github.com)

http://github.com - automatic!

Blockquotes

As Bill Mollison said:
 
> Though the problems of the world are increasingly complex,
> the solutions remain embarrassingly simple.

As Bill Mollison said:

Though the problems of the world are increasingly complex, the solutions remain embarrassingly simple.

Inline code

I think you should use 
`<details>` element here instead.

I think you should use a <details> element here instead.

Syntax highlighting

Here’s an example of how you can use syntax highlighting:

```js
function helloWorld(arg) {
  if (arg) {
    console.log({ arg, logo: 🌴 })
  }
}
```

And here's how it looks - nicely colored with styled code titles!

function helloWorld(arg) {
  if (arg) {
    console.log({ arg, logo: 🌴 })
  }
}

Footnotes

Here's a footnote[^1]. With some additional text after it. 
And then another footnote[^2]. 
 
[^1]: My example footnote.
[^2]: My other example footnote.

Here's a footnote². With some additional text after it. And then another footnote³.

Task Lists

- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

list syntax required (any unordered or ordered list supported)
this is a complete item
this is an incomplete item

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| First Header                | Second Header                |
| --------------------------- | ---------------------------- |
| Content from cell 1         | Content from cell 2          |
| Content in the first column | Content in the second column |

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear ~~crossed out~~.

Extra Cool Stuff You Can Do With Rehype

From https://rehype-pretty.pages.dev/ -- this is rad:

Line numbers and highlighting to draw attention to a particular line of code. This is straight from their page. Keeping it here for my own reference :)

```js {4} showLineNumbers
import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}
```

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax ↩
My example footnote. ↩
My other example footnote. ↩