Skip to main content

MDX Features of Docusaurus

React Component​

Code as:

docs/mdx-features.mdx
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.

Render as:

Docusaurus green and Facebook blue are my favorite colors.




Code as:

src/components/Highlight
import React from 'react';

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

With:

docs/mdx-features.mdx
import SharedHighlight from '@site/src/components/Highlight';

<SharedHighlight color="#25c2a0">Docusaurus green</SharedHighlight>
I can write **Markdown** alongside my _JSX_!

Render as:

Docusaurus green

I can write Markdown alongside my JSX!

Tabs​

Code as:

docs/mdx-features.mdx
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>

Render as:

This is an apple 🍎

NOTES​

docs/mdx-features.mdx
<!-- Prettier doesn't change this -->
:::note

Hello world

:::
note

Hello world

<!-- Prettier changes this -->
:::note
Hello world
:::
<!-- to this -->
::: note Hello world:::
docs/mdx-features.mdx
:::note[Your Title]

Some **content** with _Markdown_ `syntax`.

:::
Your Title

Some content with Markdown syntax.

docs/mdx-features.mdx
:::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>

:::
Use tabs in admonitions
This is an apple 🍎

Math​

docs/mdx-features.mdx
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 ⁣:[a,b]→Rf\colon[a,b]\to\R be Riemann integrable. Let F ⁣:[a,b]→RF\colon[a,b]\to\R be F(x)=∫axf(t) dtF(x)=\int_{a}^{x} f(t)\,dt. Then FF is continuous, and at all xx such that ff is continuous at xx, FF is differentiable at xx with F′(x)=f(x)F'(x)=f(x).

docs/mdx-features.mdx
$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
I=∫02πsin⁡(x) dxI = \int_0^{2\pi} \sin(x)\,dx

Diagrams​

Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Code Block​

```jsx title="/src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Syntax highlighting for Other languages by prism: sh, editorconfig, etc.

editorconfig:

```editorconfig title="/etc/samba.conf"
[documents]
path = /data/documents
valid users = @simon
guest ok = no
writable = yes
browsable = yes
```

sh:

```sh
$ ls /home
```
```js
function HighlightSomeText(highlight) {
  if (highlight) {
    // highlight-next-line
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}

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

  return 'Nothing highlighted';
}
```
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';
}
```jsx {1,4-6,11}
import React from 'react';

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

  return <div>Foo</div>;
}

export default MyComponent;
```
import React from 'react';

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

  return <div>Foo</div>;
}

export default MyComponent;
```jsx {1,4-6,11} showLineNumbers
import React from 'react';

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

  return <div>Foo</div>;
}

export default MyComponent;
```
import React from 'react';

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

  return <div>Foo</div>;
}

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

Importing Code​

npm install --save raw-loader
docs/mdx-features.mdx
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';

<CodeBlock language="jsx">{MyComponentSource}</CodeBlock>
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React, { useState } from 'react';

export default function MyComponent() {
  const [bool, setBool] = useState(false);
  return (
    <div>
      <p>MyComponent rendered !</p>
      <p>bool={bool ? 'true' : 'false'}</p>
      <p>
        <button onClick={() => setBool((b) => !b)}>toggle bool</button>
      </p>
    </div>
  );
}

Importing Markdown​

docs/mdx-features.mdx
import PartialExample from './_markdown-partial-example.mdx';

<PartialExample name="Sebastien" />
Hello Sebastien

This is text some content from _markdown-partial-example.mdx.

docs/mdx-features.mdx
import PartialExample1 from './wiki-skia.md';

<PartialExample1 />

It imports file from wiki-skia.md:

Wiki Skia

What the difference between SkImage/SkPicture/SkCanvas/SkSurface?

SkBitmap based SkCanvas very slow... How to improve draw speeds?

How to move SkImage from CPU to GPU?

How to control the SkImage GPU back cache size?

As far as I understand when I load SkImage from file or SkBitmap the SkImage lives in CPU side memory. Then the moment I draw this SkImage on a GPU backed canvas it will make a copy of the CPU data into a GPU backed texture. So now we technically have two copies available on the SkImage. Then each time I draw that SkImage it will do it quickly cause it's already in the GPU side.

Import Code Snippets from GitHub Repositories​

A Docusaurus v2 plugin that supports referencing code examples from public GitHub repositories.

src/theme/ReferenceCodeBlock/index.tsx
loading...
code-snippets/XKeyIn.cpp
loading...