Skip to main content

feature

MDX and React​

Using JSX in Markdown​

Docusaurus green and Facebook blue are my favorite colors.

I can write Markdown alongside my JSX!

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);
/* Instead of this: */
<span style="background-color: red">Foo</span>
/* Use this: */
<span style={{backgroundColor: 'red'}}>Foo</span>

Importing components​

<!-- Docusaurus theme component -->
import TOCInline from '@theme/TOCInline';
<!-- External component -->
import Button from '@mui/material/Button';
<!-- Custom component -->
import BrowserWindow from '@site/src/components/BrowserWindow';

Tabs​

This is an apple 🍎
TABS
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

Admonitions​

note

Some content with Markdown syntax. Check this api.

:::note

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::
tip

Some content with Markdown syntax. Check this api.

:::tip

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::
info

Some content with Markdown syntax. Check this api.

:::info

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::
caution

Some content with Markdown syntax. Check this api.

:::caution

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::
danger

Some content with Markdown syntax. Check this api.

:::danger

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

Admonitions with MDX​

Use tabs in admonitions
This is an apple 🍎

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

:::tip Use tabs in admonitions

<Tabs>
  <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
  <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
  <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs>

:::

Assets​

Images​

Example banner
![Example banner](../assets/docusaurus.png)

Files​

My Markdown page

Download this docx

or

Download this docx using Markdown

<a target="\_blank" href={require('../assets/docusaurus.png').default}> Download this docx </a>

or

[Download this docx using Markdown](../assets/docusaurus.png)

Math​

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be
$F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that
$f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

$$ I = \int_0^{2\pi} \sin(x)\,dx $$

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

test2​

asdasd

test 5​

asdasd

6666​

asdas

Loading Comments...