Markdown Kitchen Sink

Oct 21, 2024

Emphasis

**bold** _italics_ ~~strikethrough~~ <mark>highlight</mark>

bold italics strikethrough highlight

Headers

# Big header

## Medium header

### Small header

#### Tiny header

Big header

Medium header

Small header

Tiny header

Lists

- Generic list item
- Generic list item
- Generic list item

1. Numbered list item
2. Numbered list item
3. Numbered list item

• Generic list item
• Generic list item
• Generic list item

1. Numbered list item
2. Numbered list item
3. Numbered list item

Task Lists

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

• Write the press release
• Update the website
• Contact the media

Links

<http://www.example.com>

[Open in same tab](http://www.example.com)

Or use the heading id (the slugified name of the header) as an internal link...

[Internal link](#headers)

http://www.example.com

Open in same tab

Or use the heading id (the slugified name of the header) as an internal link…

Internal link

Linebreaks

Adding a single line break will not be rendered as a line break.

Here's some text.
Here's some more text.

Here’s some text. Here’s some more text.

To add a single line break use a \ or two spaces at the end of the line.

Here's some text.\
Here's some more text.

Here’s some text.
Here’s some more text.

Adding 2 line breaks starts a new paragraph.

Here is one paragraph with lengthly text.

Here is another.

Here is one paragraph with lengthly text.

Here is another.

Footnotes

Here is a simple footnote,[^1] and here is a longer one.[^named-note]

Then at the bottom of your post...

[^1]: This is the first footnote.

[^named-note]: Here is another one.

Here is a simple footnote,¹ and here is a longer one.²

Then at the bottom of your post…

Quotes

> This is a quote.
>
> It can span multiple lines!

This is a quote.

It can span multiple lines!

Images

![Cheatsheet img example](https://i.ibb.co/Vvh17pr/3jxqrKP.jpg)

<img src="https://github.com/iamvictorli.png" alt="Victor Li" width="260" height="260"/>

Gif

![](https://github.com/iamvictorli/iamvictorli.com/blob/main/src/assets/demo.gif?raw=true)

![](https://github.com/iamvictorli/ChartCrypto/blob/master/1.gif?raw=true)

Tables

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| John     | Doe      | Male     |
| Mary     | Smith    | Female   |

Displaying code

```javascript
const example = "hello!";
console.log(example);
```

const example = 'hello!'
console.log(example)

For language specific syntax highlighting, specify the language at the beginning of the code block.

Dropdown

<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>

Youtube Embed

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="encrypted-media; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>

Valtown

<iframe width="100%" height="400px" src="https://www.val.town/embed/victorli/aigreeting" title="Val Town" frameborder="0" allow="web-share" allowfullscreen></iframe>

Support iframe prototypes

• Node repl to run typescript/javascript and install dependencies. runkit, playcode.io, repl.it, or stick with valtown, need to support importing libraries/url imports.
• Cloud IDE to run quick react/web prototype, use stackblitz, codesandbox, gitpod
• Expo Snack to show off React Native projects

Optional

• Analytics, https://github.com/Destiner/astro-analytics
• Put RSS feed? https://docs.astro.build/en/guides/rss/
• Search for blog post, Either search by titles or try page find, algolia, or meilisearch
• Tags, being able to search by tags