Loading the article...export statements are active
Read in 5 min read, written by toctoc
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: 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?
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-ignorefunction 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 !
SubHeading For Blockquates
blockquate markdown element
The
@importis used to import style rules from other valid stylesheets.
custom blockquate element
The
@importis used to import style rules from other valid stylesheets.