Internal Docs: How to Docusaurisize

Here are a bunch of tips about how to use cool functionality in the docs, blogs and pages on this site. See the official docs for more information, but this is most of the important stuff.

Markdown, JSX, and MDX​

Combining Markdown and JSX via MDX pages​

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!

Result:​

I can write Markdown alongside my JSX!

Creating a code block in an MDX page​

function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Result:​

function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Tabs component usage​

Basic usage​

<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple', value: 'apple'},
    {label: 'Orange', value: 'orange'},
    {label: 'Banana', value: 'banana'},
  ]}>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>

Result:​

See Docusaurus Docs for more info.

Code Blocks and Syntax Display​

Code Block with a Title​

function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Syntax highlighting​

console.log('Every repo must come with a mascot.');

Highlighting Theming​

module.exports = {
  themeConfig: {
    prism: {
      theme: require('prism-react-renderer/themes/dracula'),
    },
  },
};

Supported Language List​

See the list here and Docusaurus docs for steps to add a new language to docs.

Highlighting lines via comments​

function HighlightSomeText(highlight) {
  if (highlight) {
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
  if (highlight) {
    return 'This range is highlighted!';
  }

  return 'Nothing highlighted';
}

Show Line Numbers​

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

Live Coding Block Plugin​

1. Install @docusaurus/theme-live-codeblock
2. Add this to docusaurus config:

module.exports = {
  // ...
  themes: ['@docusaurus/theme-live-codeblock'],
  // ...
};

3. Use the plugin in your file specifying a language:

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

Whooooooa neat!

Example code in multiple languages​

function helloWorld() {
  console.log('Hello, world!');
}

def hello_world():
  print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}

Specific NPM/Yarn tabbing utility similar to above​

See this docs section for usage details.

"Admonitions" (Alert Display Variants)​

Diagrams​

Install @docusaurus/theme-mermaid and add following to docusaurus config:

markdown: {
  mermaid: true,
},
...
themes: ['@docusaurus/theme-mermaid'],

Make a diagram using mermaid syntax:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Whoa sick:

Deployment​

Go look at the docs, pick your poison.