# markdown-render

**Repository Path**: codelint/markdown-render

## Basic Information

- **Project Name**: markdown-render
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-15
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarkdownRenderer 库

[![Version](https://img.shields.io/badge/version-1.1.0-blue.svg)](https://gitee.com/codelint/markdown-render)
[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
[![Build](https://img.shields.io/badge/build-passing-brightgreen.svg)]()

一个轻量级的 Markdown 渲染库，支持浏览器和 Node.js 环境。

## 用途

MarkdownRenderer 是一个用于将 Markdown 文本转换为 HTML 的 JavaScript 库。它专为 Chrome 扩展开发设计，但也适用于任何需要 Markdown 渲染的 Web 应用。

### 主要特性

- 支持标准 Markdown 语法
- 支持 Wiki 风格的语法（如 `[[链接]]`、`=== 标题 ===`）
- 跨环境支持（浏览器和 Node.js）
- 轻量级，无外部依赖
- 支持代码高亮（带语言标识的代码块）
- 支持表格渲染
- 支持嵌套列表
- 支持删除线（`~~text~~`）
- 支持任务列表（`- [ ]` 和 `- [x]`）
- 支持标准 Markdown 链接（`[text](url)`）
- 支持图片（`![alt](url)`）
- 支持引用块（`> text`）
- 支持 Markdown 语法自动补全

## 安装

```bash
cd markdown-renderer-lib
npm install
```

## 使用方法

### 在浏览器中使用

使用源文件：
```html
<script src="src/markdown-renderer.js"></script>
<script>
  const renderer = new MarkdownRenderer();
  const html = renderer.render('# Hello World');
  document.getElementById('content').innerHTML = html;
</script>
```

使用打包后的文件（推荐）：
```html
<script src="dist/markdown-renderer.min.js"></script>
<script>
  const renderer = new MarkdownRenderer();
  const html = renderer.render('# Hello World');
  document.getElementById('content').innerHTML = html;
</script>
```

### 在 Node.js 中使用

```javascript
const MarkdownRenderer = require('./src/markdown-renderer');

const renderer = new MarkdownRenderer();
const html = renderer.render('# Hello World');
console.log(html);
```

## 支持的语法

### 标题

```markdown
# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
```

Wiki 风格：
```markdown
=== H3 标题 ===
== H4 标题 ==
= H5 标题 =
```

### 文本样式

```markdown
**粗体文本**
'''粗体文本'''
`行内代码`
~~删除线文本~~
```

### 列表

无序列表：
```markdown
- 项目 1
- 项目 2
  - 子项目 2.1
```

有序列表：
```markdown
1. 第一项
2. 第二项
3. 第三项
```

任务列表：
```markdown
- [ ] 未完成任务
- [x] 已完成任务
```

### 链接

标准 Markdown 链接：
```markdown
[链接文本](https://example.com)
```

Wiki 风格链接：
```markdown
[[https://example.com]]
[[https://example.com|链接文本]]
```

### 图片

```markdown
![图片描述](https://example.com/image.png)
```

### 引用块

```markdown
> 这是一段引用文本
> 这是另一段引用
```

### 代码块

带语言标识：
```markdown
```javascript
const x = 1;
```
```

不带语言标识：
```markdown
```
代码内容
```
```

### 表格

```markdown
| 标题 1 | 标题 2 |
|--------|--------|
| 单元格 1 | 单元格 2 |
```

### 分隔线

```markdown
---
```

### 自动补全

MarkdownRenderer 支持自动补全不完整的 Markdown 语法，提升用户输入体验：

```markdown
**粗体          -> 自动补全为 **粗体**
'''粗体         -> 自动补全为 '''粗体'''
~~删除线        -> 自动补全为 ~~删除线~~
`代码           -> 自动补全为 `代码`
[链接           -> 自动补全为 [链接]()
![图片          -> 自动补全为 ![图片]()
```

自动补全功能会在渲染时自动执行，无需额外配置。它会智能识别行尾不完整的语法标记并自动补全。

## 文档

- [API 文档](API.md) - 完整的 API 参考文档
- [样式定制指南](STYLING.md) - HTML 结构和 CSS 类名参考，用于自定义样式
- [变更日志](CHANGELOG.md) - 版本历史和变更记录

## 开发约束

### 代码规范

1. **无注释**：代码中不添加任何注释，除非明确要求
2. **跨环境兼容**：代码必须同时支持浏览器和 Node.js 环境
3. **无外部依赖**：不使用任何第三方库
4. **纯 JavaScript**：不使用 TypeScript 或其他语言

### 测试要求

1. 所有新功能必须包含测试用例
2. 运行测试：`npm test`
3. 测试文件位于 `test/` 目录
4. 确保所有测试通过后再提交代码

### 兼容性

- 支持现代浏览器（Chrome, Firefox, Safari, Edge）
- 支持 Node.js 12 及以上版本

### 性能考虑

- 避免不必要的正则表达式回溯
- 优先使用字符串方法而非正则表达式处理简单替换
- 避免深层嵌套的循环

## 运行测试

```bash
npm test
```

## 打包

将库打包成压缩的前端JS文件，用于生产环境部署。

### 打包命令

```bash
npm run build
```

### 打包输出

打包后会在 `dist/` 目录下生成两个文件：

- `markdown-renderer.js` - 未压缩版本（约 5.6KB）
- `markdown-renderer.min.js` - 压缩版本（约 3.3KB，压缩率约 42%）

### 使用打包后的文件

在浏览器中直接引用压缩版本：

```html
<script src="dist/markdown-renderer.min.js"></script>
<script>
  const renderer = new MarkdownRenderer();
  const html = renderer.render('# Hello World');
  document.getElementById('content').innerHTML = html;
</script>
```

### 其他打包方案

如果需要使用其他打包工具（如 Rollup、esbuild、Webpack），请参考 [BUILD.md](BUILD.md) 文档获取详细的配置说明。

## 项目结构

```
markdown-renderer-lib/
├── package.json           # 项目配置
├── src/
│   └── markdown-renderer.js  # 主库文件
└── test/
    └── markdown-renderer.test.js  # 测试文件
```

## 许可证

MIT