Markdown编辑器-实时预览工具

实时预览的Markdown编辑器，支持常用语法和HTML转换

Markdown编辑器

# Markdown编辑器

这是一个**实时预览**的Markdown编辑器。

## 功能特点
- 实时预览HTML效果
- 支持常用Markdown语法
- 响应式设计

### 支持的语法
1. **粗体** 和 *斜体*
2. `行内代码`
3. [链接](https://tool.t086.com)
4. 列表项

#### 四级标题示例
这是四级标题的演示内容

##### 五级标题示例
这是五级标题的演示内容，基本上用不到

```javascript
// JavaScript代码块示例 - 测试特殊字符处理
function hello() {
    console.log("Hello <strong>Markdown</strong>!");
    const markdown = "**粗体** *斜体* `代码`";
    console.log(markdown);
    return "This is a <code>test</code> with HTML entities";
}

// 测试包含#符号的代码
const message = "# 这不是标题，而是字符串";
console.log(message);
```

```python
# Python代码块示例 - 测试特殊字符和长代码行
def greet(name):
    return f"Hello, {name}! This contains <html> tags"
```

# 测试长代码行
very_long_variable_name = "这是一个非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的字符串"

# 测试宽表格
| 列标题1 | 列标题2 | 列标题3 | 列标题4 | 列标题5 | 列标题6 | 列标题7 | 列标题8 | 列标题9 | 列标题10 |
|---------|---------|---------|---------|---------|---------|---------|---------|---------|----------|
| 数据1   | 数据2   | 数据3   | 数据4   | 数据5   | 数据6   | 数据7   | 数据8   | 数据9   | 数据10   |

```bash
# Shell脚本示例 - 测试#符号
echo "# 这不是标题"
echo "This is a test with <html> tags"
```

HTML预览

HTML预览将显示在这里...

Markdown编辑器

Markdown是一种轻量级标记语言，允许人们使用易读易写的纯文本格式编写文档。本工具提供了实时预览的Markdown编辑器，支持常用的Markdown语法，包括标题、粗体、斜体、代码块、链接、图片、列表等。您可以在左侧编辑Markdown文本，右侧实时预览HTML渲染效果。Markdown广泛应用于文档编写、博客写作、README文件等场景，具有语法简单、易于学习、兼容性好等特点。使用本工具，您可以快速编写和预览Markdown文档，并获取对应的HTML代码用于网页发布。

📝 Markdown语法详细介绍

标题语法

Markdown支持6级标题，使用1-6个#符号表示：

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文本格式

粗体: 使用**粗体**或__粗体__
斜体: 使用*斜体*或_斜体_
~~删除线~~: 使用~~删除线~~
行内代码: 使用反引号包裹

列表语法

无序列表:

- 项目1
- 项目2
  - 子项目1
  - 子项目2

有序列表:

1. 第一项
2. 第二项
3. 第三项

代码块

行内代码: `代码`

代码块:

```语言名称
代码内容
```

链接和图片

链接: [显示文本](链接地址 "可选标题")

图片: ![图片描述](图片链接 "可选标题")

引用和分割线

引用:

> 引用内容
> 可以多行

分割线: 使用三个或以上的---、***或___

表格语法

| 表头1 | 表头2 | 表头3 |
|-------|-------|-------|
| 内容1 | 内容2 | 内容3 |
| 左对齐 | 居中对齐 | 右对齐 |