Read in 6 min., written by toctoc

Test MDX with Table Of Contents

VERY SIMPLE TABLE OF CONTENTS

1.Section 1#section-1
1.1.Heading For Components#heading-for-components
1.2.Heading For Plugins#heading-for-plugins
1.2.1.SubHeading For Flexible Markers#subheading-for-flexible-markers
1.2.2.SubHeading For Emojies#subheading-for-emojies
1.2.3.SubHeading For Flexible Paragraphs#subheading-for-flexible-paragraphs
1.2.4.SubHeading For Flexible Containers#subheading-for-flexible-containers
1.3.Heading For Code Highlighting#heading-for-code-highlighting
2.Section 2#section-2
2.1.Heading For GFM#heading-for-gfm
2.2.Heading For Miscellenous#heading-for-miscellenous
2.2.1.SubHeading for Lists#subheading-for-lists
2.2.3.SubHeading For Escapes#subheading-for-escapes
2.2.4.SubHeading For Centering#subheading-for-centering
2.2.5.SubHeading For Blockquates#subheading-for-blockquates

Section 1

Heading For Components

Hello {props.foo} is working.

I am a dynamic component

Heading For Plugins

SubHeading For Flexible Markers

Marked texts: text with yellow, text with red, text with green, and text with blue.

SubHeading For Emojies

Some markdown content 👍

SubHeading For Flexible Paragraphs

Alert Text Centered

Warning Text Aligned Right

SubHeading For Flexible Containers

Warning

You have to put an empty line after export statements in the mdx files.

Exports May Be Harmful

Can you explain why the exports may cause harmful activities ?

The ways of removing exports

You can use disableExports: true option to remove all export statements
You can use a custom recma plugin to remove all exports other than default, but the declarations stay and work in the mdx (needs a recma plugin)
What do you think about that?

Some Usefull Tips

Recma Plugins

Recma plugins are very usefull for solving specific mdx issues.

Table of Contents (TOC)

The remark plugin remark-flexible-toc is the tool for creating TOC, especially for the mdx users. You can create a custom <Toc /> component, and use it in the mdx file like <Toc toc={toc} />.

Sample Details-Summary

The remark-flexible-containers can also make this kind of details-summary HTML elements.

Heading For Code Highlighting

demo.ts

typescript// prettier-ignore
function Text(text: string) {console.log(text)}
const text = "next-mdx-remote-client";
Text(text);

Section 2

Heading For GFM

Autolink www.example.com and inline code.

~~one tilde strikethrough~~ or ~~two tildes strikethrough~~

Left Aligned Header	Right Aligned Header
Content Cell	Content Cell
Content Cell	Content Cell

Heading For Miscellenous

SubHeading for Lists

List item with Normal text
List item with Bold text
List item with Italic text
Heading-4 in list
Heading-5 in list

SubHeading For Escapes

"Authorize <GITHUB_USER>"

version of <operation>.<mount> <= 1.3.x

< 8ms (allowed one blank after "<")

escape opening curlybraces "{}"

SubHeading For Centering

Centering text and image is very easy !

SubHeading For Blockquates

The @import is used to import style rules from other valid stylesheets. blockquate markdown element

The @import is used to import style rules from other valid stylesheets. custom blockquate element

Loading the article...

with using evaluate	with using MDXRemote
`Loading the article...`	`Loading the article...`

Loading the article...

Loading the article...

with using evaluate with using MDXRemote

Read in 6 min., written by toctoc

Test MDX with Table Of Contents

VERY SIMPLE TABLE OF CONTENTS

1.Section 1#section-1
1.1.Heading For Components#heading-for-components
1.2.Heading For Plugins#heading-for-plugins
1.2.1.SubHeading For Flexible Markers#subheading-for-flexible-markers
1.2.2.SubHeading For Emojies#subheading-for-emojies
1.2.3.SubHeading For Flexible Paragraphs#subheading-for-flexible-paragraphs
1.2.4.SubHeading For Flexible Containers#subheading-for-flexible-containers
1.3.Heading For Code Highlighting#heading-for-code-highlighting
2.Section 2#section-2
2.1.Heading For GFM#heading-for-gfm
2.2.Heading For Miscellenous#heading-for-miscellenous
2.2.1.SubHeading for Lists#subheading-for-lists
2.2.3.SubHeading For Escapes#subheading-for-escapes
2.2.4.SubHeading For Centering#subheading-for-centering
2.2.5.SubHeading For Blockquates#subheading-for-blockquates

Section 1

Heading For Components

Hello {props.foo} is working.

I am a dynamic component

Heading For Plugins

SubHeading For Flexible Markers

Marked texts: text with yellow, text with red, text with green, and text with blue.

SubHeading For Emojies

Some markdown content 👍

SubHeading For Flexible Paragraphs

Alert Text Centered

Warning Text Aligned Right

SubHeading For Flexible Containers

Warning

You have to put an empty line after export statements in the mdx files.

Exports May Be Harmful

Can you explain why the exports may cause harmful activities ?

The ways of removing exports

You can use disableExports: true option to remove all export statements
You can use a custom recma plugin to remove all exports other than default, but the declarations stay and work in the mdx (needs a recma plugin)
What do you think about that?

Some Usefull Tips

Recma Plugins

Recma plugins are very usefull for solving specific mdx issues.

Table of Contents (TOC)

The remark plugin remark-flexible-toc is the tool for creating TOC, especially for the mdx users. You can create a custom <Toc /> component, and use it in the mdx file like <Toc toc={toc} />.

Sample Details-Summary

The remark-flexible-containers can also make this kind of details-summary HTML elements.

Heading For Code Highlighting

demo.ts

typescript// prettier-ignore
function Text(text: string) {console.log(text)}
const text = "next-mdx-remote-client";
Text(text);

Section 2

Heading For GFM

Autolink www.example.com and inline code.

~~one tilde strikethrough~~ or ~~two tildes strikethrough~~

Left Aligned Header	Right Aligned Header
Content Cell	Content Cell
Content Cell	Content Cell

Heading For Miscellenous

SubHeading for Lists

List item with Normal text
List item with Bold text
List item with Italic text
Heading-4 in list
Heading-5 in list

SubHeading For Escapes

"Authorize <GITHUB_USER>"

version of <operation>.<mount> <= 1.3.x

< 8ms (allowed one blank after "<")

escape opening curlybraces "{}"

SubHeading For Centering

Centering text and image is very easy !

SubHeading For Blockquates

The @import is used to import style rules from other valid stylesheets. blockquate markdown element

The @import is used to import style rules from other valid stylesheets. custom blockquate element

validated exports

Read in 6 min., written by toctoc

Test MDX with Table Of Contents

VERY SIMPLE TABLE OF CONTENTS

1.Section 1#section-1
1.1.Heading For Components#heading-for-components
1.2.Heading For Plugins#heading-for-plugins
1.2.1.SubHeading For Flexible Markers#subheading-for-flexible-markers
1.2.2.SubHeading For Emojies#subheading-for-emojies
1.2.3.SubHeading For Flexible Paragraphs#subheading-for-flexible-paragraphs
1.2.4.SubHeading For Flexible Containers#subheading-for-flexible-containers
1.3.Heading For Code Highlighting#heading-for-code-highlighting
2.Section 2#section-2
2.1.Heading For GFM#heading-for-gfm
2.2.Heading For Miscellenous#heading-for-miscellenous
2.2.1.SubHeading for Lists#subheading-for-lists
2.2.3.SubHeading For Escapes#subheading-for-escapes
2.2.4.SubHeading For Centering#subheading-for-centering
2.2.5.SubHeading For Blockquates#subheading-for-blockquates

Section 1

Heading For Components

Hello {props.foo} is working.

I am a dynamic component

Heading For Plugins

SubHeading For Flexible Markers

Marked texts: text with yellow, text with red, text with green, and text with blue.

SubHeading For Emojies

Some markdown content 👍

SubHeading For Flexible Paragraphs

Alert Text Centered

Warning Text Aligned Right

SubHeading For Flexible Containers

Warning

You have to put an empty line after export statements in the mdx files.

Exports May Be Harmful

Can you explain why the exports may cause harmful activities ?

The ways of removing exports

You can use disableExports: true option to remove all export statements
You can use a custom recma plugin to remove all exports other than default, but the declarations stay and work in the mdx (needs a recma plugin)
What do you think about that?

Some Usefull Tips

Recma Plugins

Recma plugins are very usefull for solving specific mdx issues.

Table of Contents (TOC)

The remark plugin remark-flexible-toc is the tool for creating TOC, especially for the mdx users. You can create a custom <Toc /> component, and use it in the mdx file like <Toc toc={toc} />.

Sample Details-Summary

The remark-flexible-containers can also make this kind of details-summary HTML elements.

Heading For Code Highlighting

demo.ts

typescript// prettier-ignore
function Text(text: string) {console.log(text)}
const text = "next-mdx-remote-client";
Text(text);

Section 2

Heading For GFM

Autolink www.example.com and inline code.

~~one tilde strikethrough~~ or ~~two tildes strikethrough~~

Left Aligned Header	Right Aligned Header
Content Cell	Content Cell
Content Cell	Content Cell

Heading For Miscellenous

SubHeading for Lists

List item with Normal text
List item with Bold text
List item with Italic text
Heading-4 in list
Heading-5 in list

SubHeading For Escapes

"Authorize <GITHUB_USER>"

version of <operation>.<mount> <= 1.3.x

< 8ms (allowed one blank after "<")

escape opening curlybraces "{}"

SubHeading For Centering

Centering text and image is very easy !

SubHeading For Blockquates

The @import is used to import style rules from other valid stylesheets. blockquate markdown element

The @import is used to import style rules from other valid stylesheets. custom blockquate element

mdx

Loading the article...

Read in 6 min., written by toctoc

Test MDX with Table Of Contents

VERY SIMPLE TABLE OF CONTENTS

1.Section 1#section-1
1.1.Heading For Components#heading-for-components
1.2.Heading For Plugins#heading-for-plugins
1.2.1.SubHeading For Flexible Markers#subheading-for-flexible-markers
1.2.2.SubHeading For Emojies#subheading-for-emojies
1.2.3.SubHeading For Flexible Paragraphs#subheading-for-flexible-paragraphs
1.2.4.SubHeading For Flexible Containers#subheading-for-flexible-containers
1.3.Heading For Code Highlighting#heading-for-code-highlighting
2.Section 2#section-2
2.1.Heading For GFM#heading-for-gfm
2.2.Heading For Miscellenous#heading-for-miscellenous
2.2.1.SubHeading for Lists#subheading-for-lists
2.2.3.SubHeading For Escapes#subheading-for-escapes
2.2.4.SubHeading For Centering#subheading-for-centering
2.2.5.SubHeading For Blockquates#subheading-for-blockquates

Section 1

Heading For Components

Hello {props.foo} is working.

I am a dynamic component

Heading For Plugins

SubHeading For Flexible Markers

Marked texts: text with yellow, text with red, text with green, and text with blue.

SubHeading For Emojies

Some markdown content 👍

SubHeading For Flexible Paragraphs

Alert Text Centered

Warning Text Aligned Right

SubHeading For Flexible Containers

Warning

You have to put an empty line after export statements in the mdx files.

Exports May Be Harmful

Can you explain why the exports may cause harmful activities ?

The ways of removing exports

You can use disableExports: true option to remove all export statements
You can use a custom recma plugin to remove all exports other than default, but the declarations stay and work in the mdx (needs a recma plugin)
What do you think about that?

Some Usefull Tips

Recma Plugins

Recma plugins are very usefull for solving specific mdx issues.

Table of Contents (TOC)

The remark plugin remark-flexible-toc is the tool for creating TOC, especially for the mdx users. You can create a custom <Toc /> component, and use it in the mdx file like <Toc toc={toc} />.

Sample Details-Summary

The remark-flexible-containers can also make this kind of details-summary HTML elements.

Heading For Code Highlighting

demo.ts

typescript// prettier-ignore
function Text(text: string) {console.log(text)}
const text = "next-mdx-remote-client";
Text(text);

Section 2

Heading For GFM

Autolink www.example.com and inline code.

~~one tilde strikethrough~~ or ~~two tildes strikethrough~~

Left Aligned Header	Right Aligned Header
Content Cell	Content Cell
Content Cell	Content Cell

Heading For Miscellenous

SubHeading for Lists

List item with Normal text
List item with Bold text
List item with Italic text
Heading-4 in list
Heading-5 in list

SubHeading For Escapes

"Authorize <GITHUB_USER>"

version of <operation>.<mount> <= 1.3.x

< 8ms (allowed one blank after "<")

escape opening curlybraces "{}"

SubHeading For Centering

Centering text and image is very easy !

SubHeading For Blockquates

The @import is used to import style rules from other valid stylesheets. blockquate markdown element

The @import is used to import style rules from other valid stylesheets. custom blockquate element

mdx

Test MDX with Table Of Contents

Section 1

Heading For Components

Heading For Plugins

SubHeading For Flexible Markers

SubHeading For Emojies

SubHeading For Flexible Paragraphs

SubHeading For Flexible Containers

Recma Plugins

Table of Contents (TOC)

Heading For Code Highlighting

Section 2

Heading For GFM

Heading For Miscellenous

SubHeading for Lists

Heading-4 in list

Heading-5 in list

SubHeading For Escapes

SubHeading For Centering

SubHeading For Blockquates

Test MDX with Table Of Contents

Section 1

Heading For Components

Heading For Plugins

SubHeading For Flexible Markers

SubHeading For Emojies

SubHeading For Flexible Paragraphs

SubHeading For Flexible Containers

Recma Plugins

Table of Contents (TOC)

Heading For Code Highlighting

Section 2

Heading For GFM

Heading For Miscellenous

SubHeading for Lists

Heading-4 in list

Heading-5 in list

SubHeading For Escapes

SubHeading For Centering

SubHeading For Blockquates

Test MDX with Table Of Contents

Section 1

Heading For Components

Heading For Plugins

SubHeading For Flexible Markers

SubHeading For Emojies

SubHeading For Flexible Paragraphs

SubHeading For Flexible Containers

Recma Plugins

Table of Contents (TOC)

Heading For Code Highlighting

Section 2

Heading For GFM

Heading For Miscellenous

SubHeading for Lists

Heading-4 in list

Heading-5 in list

SubHeading For Escapes

SubHeading For Centering

SubHeading For Blockquates

Test MDX with Table Of Contents

Section 1

Heading For Components

Heading For Plugins

SubHeading For Flexible Markers

SubHeading For Emojies

SubHeading For Flexible Paragraphs

SubHeading For Flexible Containers

Recma Plugins

Table of Contents (TOC)

Heading For Code Highlighting

Section 2

Heading For GFM

Heading For Miscellenous

SubHeading for Lists

Heading-4 in list

Heading-5 in list

SubHeading For Escapes

SubHeading For Centering

SubHeading For Blockquates