Markdown Formatting Guide

Table of Contents

• 1. Headings
  • H3
    • H4
      • H5
        • H6
  • 1.1 Section Heading
• 2. Text Formatting
  • 2.1 Emphasis
  • 2.2 Subscript & Superscript
  • 2.3 Blockquotes
  • 2.4 Code Formatting
  • 2.5 Inline Code & Code Blocks
    • Bash Code Block
    • JavaScript Code Block
    • Diff Block
• 3. Links & Images
• 4. Mathematical Expressions
• 5. Diagrams
• 6. Lists
  • 6.1 Unordered Lists
  • 6.2 Ordered Lists
  • 6.3 Nested Lists
  • 6.4 Task Lists
  • 6.5 Definition Lists
• 7. Alerts
• 8. Tables
• 9. Custom Elements
  • 9.1 Highlights
  • 9.2 Keyboard Shortcuts
• 10. Footnotes

1. Headings

H3

H4

H5

H6

Sed diam sed dolor eos voluptua. Magna justo molestie liber ipsum invidunt qui diam. Magna duo est vero aliquyam et congue dolores lorem ea et dolore ipsum. Sit clita aliquyam et est labore rebum sed labore consetetur diam ea accusam. In elitr kasd et amet doming. Takimata no iriure dolor accusam te eu dolor takimata consetetur option aliquyam vero eirmod consetetur duo magna duis feugait. Dolor amet duis lorem vero commodo consequat dolore takimata ipsum diam praesent amet dolores est dolore sanctus et labore.

1.1 Section Heading

Some body text of this section.

Some text I want to provide a direct link to, but which doesn't have its own heading.

(… more content…)

A link to that custom anchor

This example
Will span two lines

2. Text Formatting

2.1 Emphasis

Bold
Italic
Strike Through This
Underline
This text is extremely important
All this text is important
The background color is #ffffff for light mode and #000000 for dark mode.

Few others

• rgb(232,71,45)
• #ef4591
• #ef3
• hsl(0, 100%, 50%)
• rgba(232,71,45,0.71)

2.2 Subscript & Superscript

This is a _subscript text
This is a ^superscript text

2.3 Blockquotes

Text that is a quote

2.4 Code Formatting

Use git status to list all new or modified files that haven't yet been committed.

2.5 Inline Code & Code Blocks

Bash Code Block

# Basic Git Commands
git status
git add
git commit

JavaScript Code Block

const foo = "bar";
console.log(foo);
 
// This is a comment
 
function baz() {
    return foo;
}
 
baz();

Diff Block

import nextMDX from "@next/mdx";
import rehypePrettyCode from "rehype-pretty-code";
 
/** @type {import('rehype-pretty-code').Options} */
const options = {
  // See Options section below.
};
 
const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [[rehypePrettyCode, options]],
  },
});
 
/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true };
 
export default withMDX(nextConfig);

3. Links & Images

This site was built using GitHub Pages.

4. Mathematical Expressions

Lift ($L$) can be determined by Lift Coefficient ($C_L$) like the following equation:

$L = \frac{1}{2} \rho v^2 S C_L$

$\sqrt{a^2 + b^2}$

5. Diagrams

6. Lists

6.1 Unordered Lists

• George Washington

• John Adams

• Thomas Jefferson

6.2 Ordered Lists

1. James Madison
2. James Monroe
3. John Quincy Adams

6.3 Nested Lists

1. First list item
   • First nested list item
     • Second nested list item

6.4 Task Lists

• #739
• https://github.com/octo-org/octo-repo/issues/740
• Add delight to the experience when all tasks are complete 🎉

6.5 Definition Lists

Indent

(noun) A whitespace to align text in a beautiful way.

(verb) To add whitespace to make ugly code beautiful.

7. Alerts

8. Tables

9. Custom Elements

9.1 Highlights

I need to highlight these very important words in a sentence.

9.2 Keyboard Shortcuts

⌘K
⌘⇧N
⌥⌘P

10. Footnotes

Here is a simple footnote¹.

A footnote can also have multiple lines².