Skip to main content

Create a Page

Add Markdown or React files to src/pages to create a standalone page:

  • src/pages/index.js → localhost:3000/
  • src/pages/foo.md → localhost:3000/foo
  • src/pages/foo/bar.js → localhost:3000/foo/bar

Create your first React Page​

Create a file at src/pages/my-react-page.js:

src/pages/my-react-page.js
import React from "react";
import Layout from "@theme/Layout";

export default function MyReactPage() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}

A new page is now available at http://localhost:3000/my-react-page.

Create your first Markdown Page​

Create a file at src/pages/my-markdown-page.md:

src/pages/my-markdown-page.md
# My Markdown page

This is a Markdown page

A new page is now available at http://localhost:3000/my-markdown-page.

React <Component />​

MDX allows React components inside Markdown making it more interactive:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !

Custom Highlight​

To render the custom highlights:

src/components/Highlight/index.tsx
import React, { type ReactNode } from "react";

export default function Highlight({
  children,
  color,
}: {
  children: ReactNode;
  color: string;
}): JSX.Element {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: "15px",
        color: "#fff",
        padding: '0.5rem',
      }}
    >
      {children}
    </span>
  );
}
And some <Highlight color="#1877F2">custom markup</Highlight>
- #1da1f2 <Highlight color="#1da1f2">Primary color</Highlight>

And so on..

  • And some custom markup

  • #1da1f2 Primary color

  • #878787 Secondary color

  • #41B883 Fresh Green

Icons​

Font Awesome​

Font Awesome Icons. The file MDXComponents.tsx or MDXComponents.js should be present in the src/theme folder.

npm install --save @fontawesome/fontawesome-svg-core @fontawesome/free-solid-svg-icons @fortawesome/react-fontawesome

npm install --save @fontawesome/free-regular-svg-icons @fontawesome/free-brands-svg-icons
src/theme/MDXComponents.js
import React from "react";
// Import the original mapper
import MDXComponents from "@theme-original/MDXComponents";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";

library.add(fab, fas);

export default {
  ...MDXComponents,
  FAIcon: FontAwesomeIcon, // Make the FontAwesomeIcon component available in MDX as <icon />.
};
src/theme/MDXComponents.js
import React from "react";
// Import the original mapper
import MDXComponents from "@theme-original/MDXComponents";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";

library.add(fab, fas);

export default {
  ...MDXComponents,
  FAIcon: FontAwesomeIcon, // Make the FontAwesomeIcon component available in MDX as <icon />.
};
https://mkeithx.pages.dev
Rendering Font Awesome Icons
<FAIcon icon="fa-brands fa-github" size="3x" />

<FAIcon icon="fa-brands fa-x-twitter" size="3x" />

<FAIcon icon="fa-brands fa-youtube" size="3x" />

<FAIcon icon="fa-brands fa-linkedin" size="3x" />

<FAIcon icon="fa-brands fa-python" size="3x" />

<FAIcon icon="fa-brands fa-js" size="3x" />

<FAIcon icon="fa-brands fa-react" size="3x" />

Custom Admonitions​

To render these custom admonition in your .mdx, put import Admonition from "@theme/Admonition";

https://mkeithx.pages.dev

JSX​

💡Did you know...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

💀Danger...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

ℹī¸Take note...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

â˜ĸī¸Warning...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

Swizzle​

tip

Custom tip

security

This is a security warning

caution

This is a security warning

credit

The quick credit.

discord

Discord

Did you know...

Discord

release

Release Test

HTML Embeds​

https://mkeithx.pages.dev
<pre>
  <b>Input: </b>1 2 3 4{'\n'}
  <b>Output: </b>"366300745"{'\n'}
</pre>
Input: 1 2 3 4

Output: "366300745"
Last updated on by Keith Tan