Test MDX with Table Of Contents

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.2.SubHeading For Escapes#subheading-for-escapes
2.2.3.SubHeading For Centering#subheading-for-centering
2.2.4.SubHeading For Blockquates#subheading-for-blockquates

Section 1

Heading For Components

I am a dynamic component

Heading For Plugins

SubHeading For Flexible Markers

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

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 Useful 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);

page.tsx

diff// example for deletion and addition lines
- { MDXRemote } from "next-mdx-remote";
+ { MDXClient } from "next-mdx-remote-client";

Section 2

Heading For GFM

Autolink www.example.com and inline code.

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

Here is ~~deleted text~~ and inserted text

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

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 !

cover

SubHeading For Blockquates

blockquate markdown element

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

custom blockquate element

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