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

{factorial(num) === 720 ? "export statements are active" : "export statements are disabled"}

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

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.

Containers can be nested

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

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

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~~

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 @import is used to import style rules from other valid stylesheets.

export const num = 6;

SubHeading For Mixing Markdown and HTML

A mix of *markdown* and HTML.

A mix of markdown and HTML.