MainStatic DocsDynamic DocsStatic BlogDynamic BlogLazy BlogAbout
with using hydratewith using MDXClient
Note

I kept the document structure the same to see how markdown behaves to javascript expressions in curlybraces {} and mdx syntax.

import Bar from "../../../mdxComponents/Bar.mjs";

Read in {readingTime}, written by {frontmatter.author}

{frontmatter.title}

Section 1

Heading For Components

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

All JSX syntax is omitted by the remark parser in markdown.

All javascript statements in { } are considered as just text in markdown.

Tip

The markdown syntax inside a block-level HTML element like <p> or <details> doesn't work in markdown, but works in inline-level HTML elements like <span>.

Pay Attention

The allowDangerousHtml is set to true by default in mdx-js/mdx. If the file is markdown "md" format, html elements are removed in case you don't use rehype-raw plugin.

**Markdown syntax doesn't work in details-summary** + List item - 1 + List item - 2

_The markdown list syntax also doesn't work !_

Table Of Contents (Toc)

The remark plugin remark-toc is one of the tool for creating TOC inline in the markdown files.

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

export function factorial(factor) { if (factor <= 1) { return 1; } return factor * factorial(factor - 1); }

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

SubHeading For Blockquates

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

export const num = 6;

SubHeading For Mixing Markdown and HTML

A mix of *markdown* and HTML.
A mix of *markdown* and HTML.
A mix of *markdown* and HTML.

A mix of markdown and HTML.

Markdown doesn't support exports
Note

I kept the document structure the same to see how markdown behaves to javascript expressions in curlybraces {} and mdx syntax.

import Bar from "../../../mdxComponents/Bar.mjs";

Read in {readingTime}, written by {frontmatter.author}

{frontmatter.title}

Section 1

Heading For Components

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

All JSX syntax is omitted by the remark parser in markdown.

All javascript statements in { } are considered as just text in markdown.

Tip

The markdown syntax inside a block-level HTML element like <p> or <details> doesn't work in markdown, but works in inline-level HTML elements like <span>.

Pay Attention

The allowDangerousHtml is set to true by default in mdx-js/mdx. If the file is markdown "md" format, html elements are removed in case you don't use rehype-raw plugin.

**Markdown syntax doesn't work in details-summary** + List item - 1 + List item - 2

_The markdown list syntax also doesn't work !_

Table Of Contents (Toc)

The remark plugin remark-toc is one of the tool for creating TOC inline in the markdown files.

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

export function factorial(factor) { if (factor <= 1) { return 1; } return factor * factorial(factor - 1); }

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

SubHeading For Blockquates

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

export const num = 6;

SubHeading For Mixing Markdown and HTML

A mix of *markdown* and HTML.
A mix of *markdown* and HTML.
A mix of *markdown* and HTML.

A mix of markdown and HTML.

markdown