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
All JSX syntax is omitted by the remark parser in markdown.
All javascript statements in { } are considered as just text in markdown.
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>.
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 !_
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
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 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
export const num = 6;
SubHeading For Mixing Markdown and HTML
A mix of markdown and HTML.
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
All JSX syntax is omitted by the remark parser in markdown.
All javascript statements in { } are considered as just text in markdown.
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>.
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 !_
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
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 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
export const num = 6;
SubHeading For Mixing Markdown and HTML
A mix of markdown and HTML.