Read in 10 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
You have to put an empty line after export statements in the mdx files.
Can you explain why the exports may cause harmful activities ?
The ways of removing exports
- You can use
disableExports: trueoption to remove allexportstatements - You can use a custom
recmaplugin 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?
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 even in an another outer container.
Heading For Code Highlighting
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
@importis used to import style rules from other valid stylesheets. blockquate markdown element
The
@importis used to import style rules from other valid stylesheets. custom blockquate element