[next-mdx-remote-client] error compiling MDX:
Expected a closing tag for `<GITHUB_USER>` (107:12-107:25) before the end of `paragraph`
105 | #### SubHeading For Escapes
106 |
> 107 | "Authorize <GITHUB_USER>"
| ^
108 |
109 | version of \<operation>.\<mount> \<= 1.3.x
More information: https://mdxjs.com/docs/troubleshooting-mdx
---
title: "Test MDX with Syntax Error"
author: "errorr"
---
import Bar from "../../../mdxComponents/Bar.mjs";
_Read in {readingTime}, written by <Link href="#">**{frontmatter.author}**</Link>_
# {frontmatter.title}
<Toc toc={toc} ordered indented maxDepth={4} tight skipParents={["listItem", "container"]} />
## Section 1
### Heading For Components
<Hello name={props.foo} />
<CountButton />
<Bar status={frontmatter.disableImports} />
<Dynamic />
### Heading For Plugins
#### SubHeading For Flexible Markers
Marked texts: ==text with **yellow**==, =r=text with **red**==, =g=text with **green**==, and =b=text with **blue**==.
#### SubHeading For Emojies
Some **markdown** _content_ :+1:
#### SubHeading For Flexible Paragraphs
~a|> Alert Text Centered
~w:> Warning Text Aligned Right
#### SubHeading For Flexible Containers
::: warning
You have to put an empty line after `export` statements in the mdx files.
:::
::: danger Exports May Be harmful
Can you explain why the `exports` may cause harmful activities ?
<details>
<summary>**The ways of removing exports**</summary>
+ 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)
<p>_What do you think about that?_</p>
</details>
:::
::: tip 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} />`.
:::
::: details \{details} Sample Details-Summary \{summary}
The `remark-flexible-containers` can also make this kind of `details`-`summary` HTML elements.
:::
### Heading For Code Highlighting
```typescript:demo.ts
// 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 !
~|> <Image src="/images/cover.png" alt="cover" width={180} height={40} />
~|> 
#### SubHeading For Blockquates
> The `@import` is used to **import style rules** from other valid stylesheets.
> <span>=g=blockquate markdown element==</span>
<BlockQuote>
The `@import` is used to **import style rules** from other valid stylesheets.
<span>=g=custom blockquate element==</span>
</BlockQuote>
export const num = 6;
| [next-mdx-remote-client] error compiling MDX:
Expected a closing tag for `<GITHUB_USER>` (107:12-107:25) before the end of `paragraph`
105 | #### SubHeading For Escapes
106 |
> 107 | "Authorize <GITHUB_USER>"
| ^
108 |
109 | version of \<operation>.\<mount> \<= 1.3.x
More information: https://mdxjs.com/docs/troubleshooting-mdx
---
title: "Test MDX with Syntax Error"
author: "errorr"
---
import Bar from "../../../mdxComponents/Bar.mjs";
_Read in {readingTime}, written by <Link href="#">**{frontmatter.author}**</Link>_
# {frontmatter.title}
<Toc toc={toc} ordered indented maxDepth={4} tight skipParents={["listItem", "container"]} />
## Section 1
### Heading For Components
<Hello name={props.foo} />
<CountButton />
<Bar status={frontmatter.disableImports} />
<Dynamic />
### Heading For Plugins
#### SubHeading For Flexible Markers
Marked texts: ==text with **yellow**==, =r=text with **red**==, =g=text with **green**==, and =b=text with **blue**==.
#### SubHeading For Emojies
Some **markdown** _content_ :+1:
#### SubHeading For Flexible Paragraphs
~a|> Alert Text Centered
~w:> Warning Text Aligned Right
#### SubHeading For Flexible Containers
::: warning
You have to put an empty line after `export` statements in the mdx files.
:::
::: danger Exports May Be harmful
Can you explain why the `exports` may cause harmful activities ?
<details>
<summary>**The ways of removing exports**</summary>
+ 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)
<p>_What do you think about that?_</p>
</details>
:::
::: tip 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} />`.
:::
::: details \{details} Sample Details-Summary \{summary}
The `remark-flexible-containers` can also make this kind of `details`-`summary` HTML elements.
:::
### Heading For Code Highlighting
```typescript:demo.ts
// 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 !
~|> <Image src="/images/cover.png" alt="cover" width={180} height={40} />
~|> 
#### SubHeading For Blockquates
> The `@import` is used to **import style rules** from other valid stylesheets.
> <span>=g=blockquate markdown element==</span>
<BlockQuote>
The `@import` is used to **import style rules** from other valid stylesheets.
<span>=g=custom blockquate element==</span>
</BlockQuote>
export const num = 6;
|