MDX Components

MDX components used for the pages and posts in this site.

Last Updated January 09, 2023
Working In Progress

Headings

To create a heading, add number signs in front of a word or phrase.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The number of number signs you use should correspond to the heading level.

Paragraphs

This is a paragraph.

This is another paragraph.

Emphasis

You can add emphasis by making text bold or italic.

Bold

This text will be bold

Italic

This text will be italic

Strikethrough

This text will be strikethrough

Bold and Nested Italic

All this text will be bold and this text will be italic

All Bold and Italic

All this text will be bold and italic

Blockquotes

The is a blockquote

Human beings face ever more complex and urgent problems, and their effectiveness in dealing with these problems is a matter that is critical to the stability and continued progress of society.

This is another blockquote

This is a nested blockquote

This is a nested blockquote

This is a nested nested blockquote

This is a nested nested blockquote

This is a nested nested blockquote

This is a nested blockquote

This is a paragraph.

Lists

Unordered

  • Item 1
  • item 2
    • Item 2a
    • Item 2b
      • Item 2b1
      • Item 2b2

Ordered

  1. Item 1
  2. Item 2
    1. Item 2a
    2. Item 2b
      1. Item 2b1
      2. Item 2b2

Images

Remote Image

Space
Engelbart

Local Image

Space

This site was built using Next.js, MUI, and MDX.

Callout

Inline Code

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

Code Blocks

index.js

Copy
console.log("hello world")

/**
 * Some comments
 */
function sayHi(name) {
    var message = `hi ${name}`
    return message;
}

index.js

Copy
  const whoAmI = () => {
- console.log('I am a code block');

+ console.log('I am another code block');
};

test.ts

Copy
const wait = (seconds: number) => {
  return new Promise(resolve => {
    setTimeout(resolve, seconds * 1000);
  });
};

// The Maximum is Exclusive and the Minimum is Inclusive
const getRandomInt = (min: number, max: number) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
};

// The Maximum is Inclusive and the Minimum is Inclusive
const getRandomInt = (min: number, max: number) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min);
};