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:

Apple
Orange
Banana

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

Apple
Orange
Banana

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\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)$ .

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

I = \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;

JavaScript
Python
Java

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");
  }
}

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/wiki-video.mdx';

<PartialExample1 />

It imports file from wiki-video.mdx:

Wiki Video: Streaming Protocols, Video Chunk, Format/Codec, Playback

Overview

This document provides a quick reference to modern video streaming technologies, covering key differences between streaming protocols, video chunking strategies, and how video playback works in browsers and players. It focuses especially on the difference between progressive MP4 streaming and chunk-based playback via HLS/DASH.

Video Format/Codec

Common Video Streaming Protocols

Protocol	Full Name	Use Case	Live/VOD	Latency	Status	Notes
HLS	HTTP Live Streaming	Apple TV, Safari	Both	10–30 sec	Active	modern, scalable, used for both live and VOD.
DASH	MPEG-DASH	YouTube, Netflix	Both	5–15 sec	Active	Open standard, alternative to HLS
RTMP	Real-Time Messaging Protocol	OBS to YouTube/Twitch	Live Only	~2–5 sec	Deprecated (playback)	used for sending live video to servers, not for playback
RTSP	Real-Time Streaming Protocol	CCTV, IP cameras	Live Only	~1 sec	Active (niche)	Not browser-compatible; mostly in special app(surveillance systems, etc.)
WebRTC	Web Real-Time Communication	Live chat, calls	Live Only	~0.5 sec	Growing	Low latency; peer-to-peer(video calls, etc.)

Video Chunking(HLS/DASH)

In real world applications, like youtube, they will divide a video into many chunks for HLS or DASH for better performance.

Protocol	Chunk File Format	Notes
HLS	.ts (MPEG-2 Transport Stream) or .mp4 (fMP4)	.ts is traditional, .mp4 (fMP4) is newer and supports low-latency
DASH	.mp4 (fMP4)	DASH usually uses fragmented MP4

fMP4 = fragmented MP4 — this allows streaming before the full file is complete, perfect for chunked delivery.
Each chunk might be ~2–10 seconds long depending on settings.

How Does Client Handle Chunks?

The client (player) must understand how to:

Parse the manifest file (.m3u8 for HLS, .mpd for DASH)
Download the chunks in order
Buffer a few chunks ahead
Handle adaptive bitrate switching

Usually, this is done by a video player library like:

HLS.js (for browsers)
Shaka Player (for DASH)
AVPlayer (on iOS/tvOS)
ExoPlayer (on Android)

Playback

A. Chunk-Based Playback (HLS/DASH)

The player loads the manifest file.
It picks the best quality (bitrate) based on bandwidth.
It downloads chunk 1 and starts playing it while downloading chunk 2.
It continues in parallel: downloading one or more chunks ahead, playing current one.
If network speed drops, it switches bitrate (adaptive bitrate streaming).

So, no, the player doesn’t download the whole chunked video first. It streams it in real time by pulling chunks one by one.

Bonus: Manifest Files

HLS .m3u8 Example:

#EXTM3U
#EXT-X-VERSION:3
#EXTINF:10.0,
chunk1.ts
#EXTINF:10.0,
chunk2.ts
...

DASH .mpd Manifest:

An XML file describing all chunks, qualities, and durations.

Bonus: How to Create HLS from MP4 (ffmpeg Example)

ffmpeg -i input.mp4 \
  -codec: copy -start_number 0 \
  -hls_time 6 -hls_list_size 0 \
  -f hls output.m3u8

This will create .ts chunks and an .m3u8 playlist ready for HLS playback.

B. Progressive MP4 Download (Direct in Browser, via a streaming api supported by server)

A single .mp4 file is streamed via HTTP.
Browsers like Chrome or Safari can start playback once enough is buffered.
Doesn’t require special manifests.
Supports basic seeking (if moov atom is early).
No adaptive bitrate or chunk control.

Bonus: Streaming API In Python to Support Progressive MP4 Playback

fastapi_streaming.py

loading...

View on GitHub

Playback Comparison

Feature	MP4 Progressive	HLS/DASH Chunk Streaming
File Format	Single `.mp4`	Multiple `.ts` or `.mp4` chunks
Requires Manifest	❌ No	✅ Yes (`.m3u8` / `.mpd`)
Native Browser Support	✅ Yes (Chrome, etc.)	❌ (except Safari for HLS)
Adaptive Bitrate	❌ No	✅ Yes
Low-Latency Live Support	❌ Limited	✅ Yes
JS Player Required	❌ No	✅ Usually
Suitable for Long VOD	⚠️ Not ideal	✅ Excellent

When to Use Which,

MP4 Progressive:
- Small or simple videos
- Static content without network adaptation needs
HLS/DASH:
- Live streaming
- VOD with varying network conditions
- Need for adaptive bitrate
- Complex playback control (seeking, DVR, etc.)

References

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...

View on GitHub

code-snippets/XKeyIn.cpp

loading...

View on GitHub

nvidia-cuda-ffmpeg/Dockerfile

loading...

View on GitHub

React Component​

Tabs​

NOTES​

Math​

Diagrams​

Code Block​

Importing Code​

Importing Markdown​

Overview​

Video Format/Codec​

Common Video Streaming Protocols​

Video Chunking(HLS/DASH)​

How Does Client Handle Chunks?​

Playback​

A. Chunk-Based Playback (HLS/DASH)​

Bonus: Manifest Files​

Bonus: How to Create HLS from MP4 (ffmpeg Example)​

B. Progressive MP4 Download (Direct in Browser, via a streaming api supported by server)​

Bonus: Streaming API In Python to Support Progressive MP4 Playback​

Playback Comparison​

References​

Import Code Snippets from GitHub Repositories​

React Component

Tabs

NOTES

Math

Diagrams

Code Block

Importing Code

Importing Markdown

Overview

Video Format/Codec

Common Video Streaming Protocols

Video Chunking(HLS/DASH)

How Does Client Handle Chunks?

Playback

A. Chunk-Based Playback (HLS/DASH)

Bonus: Manifest Files

Bonus: How to Create HLS from MP4 (ffmpeg Example)

B. Progressive MP4 Download (Direct in Browser, via a streaming api supported by server)

Bonus: Streaming API In Python to Support Progressive MP4 Playback

Playback Comparison

References

Import Code Snippets from GitHub Repositories