Markdown API Guide

This API Guide will get you familiar with the Markdown syntax supported by remix-blog.

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.

  1. Item 1
  2. 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! 😊

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.

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.

CodeSandbox too?

Unfurl ANY Open Graph website!

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

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

or some website without an image

Table (WIP)

This is a table:

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

This is a table:

SyntaxDescriptionTest Text
HeaderTitleHere's this
ParagraphTextAnd 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 real1

Thx for reading! 👋


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