Markdown API Guide

Headers are equivalent to HTML <h1> - <h5> tags.

# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

They look like this.

Header 1

Header 2

Header 3

Header 4

Header 5

Horizontal Rule

A horizontal rule is a line that is drawn across the page using ---.

---

It looks like this.

Blockquote

A blockquote is a block of text that is quoted from another source or when you have a point to make.

> We shall go on to the end… we shall fight on the seas and oceans…
> we shall defend our Island, whatever the cost may be…
> we shall never surrender.
>
> **— Winston Churchill, 1940**

It looks like this.

We shall go on to the end… we shall fight on the seas and oceans… we shall defend our Island, whatever the cost may be… we shall never surrender.

— Winston Churchill, 1940

Bulleted List

- Pie
  - Apple
  - Cherry
- Cake
  - Chocolate
  - Vanilla

It looks like this.

Pie
- Apple
- Cherry
Cake
- Chocolate
- Vanilla

Numbered List

Numbered lists are similar to bulleted lists, but they use numbers instead of bullets. You can order the numebrs yourself, or use the 1. syntax and it will be automatically ordered.

1. Item 1
1. Item 2

It looks like this.

Item 1
Item 2

Task List

- [x] Brush teeth
- [ ] Make the bed
- [ ] Eat breakfast

It looks like this.

Brush teeth
Make the bed
Eat breakfast

Inline Code

Keys

Keys are used to show the key that should be pressed. And while not specifically a markdown feature, it's still useful to have.

<kbd>⌘</kbd> + <kbd>K</kbd>

⌘ + K

Strong (Bold)

Used to give text a strong emphasis.

**This is bold text**

It looks like this.

This is bold text

Italic

Used to give text an emphasis.

_This is italic text_

It looks like this.

This is italic text

Strikethrough

Used to give text a strikethrough or correction.

~~The world is flat.~~ We now know that the world is round.

It looks like this.

~~The world is flat.~~ We now know that the world is round.

Emoji support

To enter emoji, use an emoji keyboard (⌥+Space on a Mac).

Gone camping! ⛺️ Be back soon.

That is so funny! 😊

HTTP links

Links can be explicit or automatic. If you use the http:// or https:// prefix, it will converted to a link. If you use the markdown format, you can also specify the link text.

You should [visit my website](https://donavon.com).

https://example.com

It looks like this.

You should visit my website.

Example Domain

example.com

You can place a link to a YouTube video, or Twitter tweet and the embed will be rendered.

What a great video!

https://www.youtube.com/watch?v=dQw4w9WgXcQ

This is my pinned tweet.

https://twitter.com/donavon/status/1024995485688455168?s=20&t=erQL6wfriru10XgCRMZKqQ

What a great video!

This is my pinned tweet.

I have but 4 simple rules for my daily life:

1. Say "bless you" when I hear someone sneeze, even a complete stranger, but only once per "session".

2. Hold the door open for the person behind you.

3. Wear nice shoes.

4. Publicly shame people for abusing @channel in @SlackHQ
— west, donavon west™️ (@donavon) August 2, 2018

CodeSandbox too?

Unfurl ANY Open Graph website!

Like donavon.com (uses twitter:card of "summary")

Donavon West's website

Donavon West is a full-stack software engineer living in the New York City area.

donavon.com

or kcd.im (uses twitter:card of "summary_large_image"`)

Kent C. Dodds

Come check out how Kent C. Dodds can help you level up your career as a software engineer.

kcd.im

or some website without an image

Example Domain

example.com

Table (WIP)

This is a table:

| Syntax    | Description |   Test Text |
| :-------- | :---------: | ----------: |
| Header    |    Title    | Here's this |
| Paragraph |    Text     |    And more |

This is a table:

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more

Fenced code blocks

Code blocks are used to show code or sample output. We support an extend feature set of parameters. In its simplest form, you can use the three backticks (i.e. ```) to enclose the code.

```
This is a code block.
```

It looks like this. (WIP)

This is a code block.

If you specify a language after the backticks, it will be used to highlight the code. Supported languages are:

JavaScript: js, jsx, javacript
TypeScript: ts, tsx, typecript
Python: py, python
Markdown: md, mdx, markdown
HTML: html, htm
CSS: css
Shell: sh, zsh, bash, shell

```js
console.log('Hello World!');
```

console.log('Hello World!');

We also support space delimited optional parameters.

filename: The filename of the file.
nonumber: By default, line numbers will appear on the left. Use nonumber to disable this. (WIP)
nocopy: By default, a copy to clipboard button is shown. Specify nocopy to disable this.
lines: Specify the line numbers (in range format) to highlight. e.g. lines=1-3,5.
good: Adds a "good" treatment to the code block. Used to show code that is correct.
bad: Adds a "bad" treatment to the code block. Used to show code that is incorrect.

```js filename=helloWorld.js
console.log('Hello World!');
```

helloWorld.js

console.log('Hello World!');

TypeScript rocks! (ts, tsx, and typescript)

HelloWorld.tsx

/*
 * renders "Hello" and the name prop. ex: "Hello, Nancy"
 */
import { getHelloWorld } from './getHelloWorld';

type HelloWorldProps = {
  name: string;
};

export const HelloWorld = ({ name = 'World' }: HelloWorldProps) => {
  return (
    <div className="helloing">
      <h1>{getHelloWorld(name)}</h1>
    </div>
  );
};

And this is some CSS. Note that line 4 is commented out.

HelloWorld.css

.helloing::after {
  content: 'Hello World';
  margin: 0 -32px;
  /* padding: 0 144px 16px 32px; */
  background-color: var(--item-color);
  border-radius: 5px;
}

And some JS (js, jsx, and javascript).

awesome.js

// JavaScript is Awesome!
function getNode(tree, value) {
  if (typeof value === 'string') {
    return find(tree, { type: 'code', children: [{ value }] });
  }
  if (typeof value === 'number') {
    return tree.children[value];
  }
  return find(tree, value);
}

and Python (python and py). Note: This source can't be copied.

hello_world.py

# -----------------------------------------------------------
# This is a Python file
#
# (C) 2022 Revel Carlberg West
# Released under GNU Public License (GPL)
# -----------------------------------------------------------
import os
import sys

from mypy.main import main, process_options

def console_entry() -> None:
    try:
        main(None, sys.stdout, sys.stderr)
    except KeyboardInterrupt:
        if options.show_traceback:
            sys.stdout.write(traceback.format_exc())
        sys.stdout.write(formatter.style(msg, color="red", bold=True))
        sys.exit(2)

and bash (sh, bash, zsh, and shellscript). Note that this code is BAD.

hello_world.sh

echo 'Hello, world!'
rm -rf ~/.cache/hello_world

Markdown too (md, mdx, and markdown). Note that this code is GOOD.

hello.mdx

# Hello World

1. Hello
2. World

[foo](http://www.example.com)

Does it work with diffs too? Yes it does!

hello_world.diff

diff --git a/node_modules/foo.js b/node_modules/foo.js
index 12cbc46..fc70919 100644
--- a/node_modules/foo.js
+++ b/node_modules/foo.js
@@ -73,7 +73,9 @@ module.exports = class Foo extends FooBase {
     // Validate the thing
-    assertThing(client_secret);
+    if (!options.checkThing) {
+      assertThing(client_secret);
+    }

Footnotes

Global warming is real[^1]

[^1]: Seriously folks! See [rainforest-alliance.org](https://www.rainforest-alliance.org/everyday-actions/6-claims-made-by-climate-change-skeptics-and-how-to-respond/) for more information.

It looks like this. (the footnote will appear at the bottom of the page)

Global warming is real¹

Thx for reading! 👋

Seriously folks! See rainforest-alliance.org for more information.↩

Header

Header 1

Header 2

Header 3

Header 4

Header 5

Horizontal Rule

Blockquote

Bulleted List

Numbered List

Task List

Inline Code

Keys

Strong (Bold)

Italic

Strikethrough

Emoji support

HTTP links

Social links

Table (WIP)

Fenced code blocks

Footnotes

Written by Donavon West