MainStatic DocsDynamic DocsStatic BlogDynamic BlogLazy BlogAbout
with using evaluatewith using MDXRemote
[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} />
~|> ![cover](/images/cover.png)

#### 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;
Error
[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} />
~|> ![cover](/images/cover.png)

#### 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;
mdx