Skip to main content

MDX and React

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"