MainStatic DocsDynamic DocsStatic BlogDynamic BlogLazy BlogAbout
with using evaluatewith using MDXRemote

Read in 7 min., written by esmesm

Test MDX with Enabling Imports/Exports

Section 1

Heading For Components

Hello {props.foo} is working.

Imports work, so I am able to say HELLO from imported <Bar /> component.

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";
Text(text);

Section 2

Heading For GFM

Autolink www.example.com and inline code.

one tilde strikethrough or two tildes strikethrough

Left Aligned HeaderRight Aligned Header
Content CellContent Cell
Content CellContent 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 !

cover

cover

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 7 min., written by esmesm

Test MDX with Enabling Imports/Exports

Section 1

Heading For Components

Hello {props.foo} is working.

Imports work, so I am able to say HELLO from imported <Bar /> component.

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";
Text(text);

Section 2

Heading For GFM

Autolink www.example.com and inline code.

one tilde strikethrough or two tildes strikethrough

Left Aligned HeaderRight Aligned Header
Content CellContent Cell
Content CellContent 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 !

cover

cover

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