How to Write MDX

You can write JSX and use React components within your Markdown thanks to MDX.

Docusaurus green and C-CORE blue are my favorite colors.

I can write Markdown alongside my JSX!

Importing components

While declaring components within Markdown is very convenient for simple cases, it becomes hard to maintain in complex cases. Use a separate .js file when your component involves complex JS logic:

src/components/Highlight.js

import React from 'react';
export default function Highlight({children, color}) {  return (    <span      style={{        backgroundColor: color,        borderRadius: '2px',        color: '#fff',        padding: '0.2rem',      }}>      {children}    </span>  );}

markdown-file.mdx

import Highlight from '@site/src/components/Highlight';
<Highlight color="#25c2a0">Docusaurus green</Highlight>