Syntax - MdEditorRT Documentation

When using inline syntax (such as bold, italic, etc.), if the text to be bolded contains special characters and the bold markers (like **) are immediately adjacent to other characters, be sure to add at least one space after the second marker (such as **). Otherwise, the Markdown parser may not correctly recognize the bold effect.

Example:

Incorrect: AAA**I have a dream.**BBB

Correct: AAA**I have a dream.** BBB

The same issue applies to other inline syntaxes (such as italics, etc.). Please remember to add a space after the syntax marker to ensure correct parsing.

🐶 Heading

markdown Copy

## Heading

🐱 Bold

I have a dream that one day this nation will rise up.

markdown Copy

**I have a dream that one day this nation will rise up.**

🐭 Italic

It is a dream deeply rooted in the American dream.

markdown Copy

_It is a dream deeply rooted in the American dream._

🐹 Strikethrough

~~It is a dream deeply rooted in the American dream.~~

markdown Copy

~~It is a dream deeply rooted in the American dream.~~

🐻 Link

md-editor-rt

markdown Copy

[md-editor-rt](https://imzbf.github.io/md-editor-rt/)

🐼 Picture

markdown Copy

![Description](https://imzbf.github.io/md-editor-rt/imgs/mark_emoji.gif 'title')

🙉 Underline

Underline uses the raw HTML tag <u>, which is also inserted by the toolbar button and shortcut. With the default html: false, it is displayed as text. To render an underline, explicitly enable html: true through markdownItConfig.

markdown Copy

<u>So even though we face the difficulties of today and tomorrow, I still have a dream.</u>

🙊 Superscript

I have a dream that one day this nation will rise up.^[1]

markdown Copy

I have a dream that one day this nation will rise up.^[1]^

🐒 Subscript

I have a dream that one day this nation will rise up._[2]

markdown Copy

I have a dream that one day this nation will rise up.~[2]~

🐰 Inline Code

md-editor-rt

markdown Copy

`md-editor-rt`

🦊 Block Code

markdown Copy

```js
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
```

🖍 Line Highlighting

>= v7.0.0

Append a {...} marker to the language identifier to highlight specific code lines. Line numbers are 1-based; separate individual lines with commas and use start-end for ranges. Both js {2,4-5} and js{2,4-5} are supported.

js Copy

import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
const value = '# Hello';
const editor = <MdEditor value={value} />;
export default editor;

markdown Copy

```js {2,4-5}
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
const value = '# Hello';
const editor = <MdEditor value={value} />;
export default editor;
```

Line highlighting works independently of showCodeRowNumber, so it remains active when line numbers are hidden.

🗄 Combination

yarn
npm
pnpm

shell shell shell Copy

yarn add md-editor-rt

npm install md-editor-rt

pnpm install md-editor-rt

markdown Copy

```shell [id:yarn]
yarn add md-editor-rt
```

```shell [id:npm]
npm install md-editor-rt
```

```shell [id:pnpm]
pnpm install md-editor-rt
```

🤌🏻 Forcefully fold

js Copy

import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

markdown Copy

```js ::close
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
```

👐 Forcefully open

js Copy

import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

markdown Copy

```js ::open
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
```

According to the understanding of other editors, no other editors currently employ a similar syntax. Exercise caution when using this syntax if you intend to copy your content for display in other editors.

🐻‍❄️ Quote

Quote: I Have a Dream

markdown Copy

> Quote: I Have a Dream

🐨 Ordered List

So even though we face the difficulties of today and tomorrow, I still have a dream.
It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up.

markdown Copy

1. So even though we face the difficulties of today and tomorrow, I still have a dream.
2. It is a dream deeply rooted in the American dream.
3. I have a dream that one day this nation will rise up.

🐯 Unordered List

So even though we face the difficulties of today and tomorrow, I still have a dream.
It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up.

markdown Copy

- So even though we face the difficulties of today and tomorrow, I still have a dream.
- It is a dream deeply rooted in the American dream.
- I have a dream that one day this nation will rise up.

🦁 Task List

Friday
Saturday
Sunday

markdown Copy

- [ ] Friday
- [ ] Saturday
- [x] Sunday

Example that supports toggling task status in the preview module.

🐮 Table

THead1	THead2	THead3	THead4
text-align:left	text-align:center	text-align:right	default

markdown Copy

| THead1          |      THead2       |           THead3 | THead4  |
| :-------------- | :---------------: | ---------------: | ------- |
| text-align:left | text-align:center | text-align:right | default |

🐷 Mathematical Formula

Two modes.

🐽 Inline

$x+y^{2x}$ $\xrightarrow[under]{over}$

markdown Copy

$x+y^{2x}$

<!-- or -->

\(\xrightarrow[under]{over}\)

🐸 Block

\sqrt[3]{x}

\xrightarrow[under]{over}

markdown Copy

$$
\sqrt[3]{x}
$$

<!-- or -->

\[\xrightarrow[under]{over}\]

For more usage: https://katex.org/docs/supported.html

🐵 Diagram

--- title: Example Git diagram --- gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit

markdown Copy

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

For more usage: https://mermaid.js.org/syntax/flowchart.html

🙈 Alert

Supported Types

note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention

markdown Copy

!!! note Supported Types

note、abstract、info、tip、success、question、warning

failure、danger、bug、example、quote、hint、caution、error、attention

!!!

📊 Echarts

>= v6.0.0

Starting with v7.x, the default parser uses JSON5.parse and requires a top-level object. Unquoted property names, single-quoted strings, comments, and trailing commas are supported. JSON5 parses data only, so functions, variable references, new, and call expressions are not supported.

{ tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }

markdown Copy

```echarts
{
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
```

Starting with v7.x, the default parser does not execute JavaScript. For functions or other JavaScript-only options, provide a custom editorExtensions.echarts.parseOption. Custom parsers receive the raw Markdown content, so use them only with trusted input or strict validation.

🦄 Link Reference

md-editor-rt

markdown Copy

[md-editor-rt][1]

[1]: https://imzbf.github.io/md-editor-rt/