# rtau_markdown_beautify

**Repository Path**: tausum/rtau_markdown_beautify

## Basic Information

- **Project Name**: rtau_markdown_beautify
- **Description**: markdown导出的html美化
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-28
- **Last Updated**: 2026-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rtau_markdown_beautify

<p align="center">
  <img src="./assets/readme/hero.gif" width="100%"
       alt="rtau_markdown_beautify — terminal simulation of the build pipeline: command input, version badge, handler tips, build logs, and a blinking cursor">
</p>

> 把零散的浏览器端 JS handler **打包 + 混淆**成一个自包含的 `<script>`，再**注入**到 markdown 渲染后的 HTML 里。一条命令，页面即获得代码复制、图片预览、代码块信息框等 UI 增强。

---

## 特性

- **单命令全流程** — `node rtau-markdown-beautify.js html=page.html` 完成「合并 → 混淆 → 注入」，无需手动串联脚本
- **版本清单驱动** — `config/version/*.json` 声明当前版本包含哪些 handler、顺序、版本号，新增功能只添文件 + 改清单
- **两阶段处理** — `before_handler`（构建期预处理 HTML）与 `post_handler`（运行时注入）解耦，职责清晰
- **自动混淆** — 基于 `javascript-obfuscator` 打包后混淆，默认「尝试模式」失败降级不中断
- **产物即用** — 输出 `*.rmb.html`，可直接部署或嵌入任意 markdown 查看器

---

## 快速开始

### 前置要求

- Node.js >= 18（ESM 环境）

### 安装

```bash
git clone https://gitee.com/tausum/rtau_markdown_beautify.git
cd rtau_markdown_beautify
npm install
```

### 构建并注入

```bash
# 默认使用 config/version/latest.json
node rtau-markdown-beautify.js html=your-page.html

# 指定版本
node rtau-markdown-beautify.js html=your-page.html version=1.6.0

# 强制混淆（CI / 发布场景，混淆失败即报错）
node rtau-markdown-beautify.js html=your-page.html minify=1
```

产物：`your-page.rmb.html`（默认与源文件同目录、同名加 `.rmb` 后缀）。

### 进阶：分步执行

需要单独观察中间产物时，可拆分两步：

```bash
# 阶段1：合并 + 混淆 → dist/<ver>.js
node combine.js html=your-page.html version=1.6.0

# 阶段2：注入 → your-page.rmb.html
node inject-html.js inject=dist/1.6.0.js html=your-page.html placeholder='</body>'
```

### debug 模式

把 `debug` 放在参数**最后一位**（位置敏感）：

```bash
node rtau-markdown-beautify.js html=your-page.html debug
```

---

## 工作机制

```
┌─────────────────────────────────────────────────────────────────────┐
│   config/version/<ver>.json   ← 版本清单：模块列表、顺序、版本号      │
│   config/minify.config.json   ← javascript-obfuscator 混淆参数        │
└──────────────────────────────┬──────────────────────────────────────┘
                               │ 读取
                               ▼
┌─────────────────────────────────────────────────────────────────────┐
│  combine.js  阶段1：合并 + 混淆                                      │
│  ① 按清单排序（before 先于 post）                                     │
│  ② before_handler：动态 import() handle(html) → 预处理 HTML           │
│  ③ post_handler：源码文本拼接                                        │
│  ④ javascript-obfuscator 混淆（默认尝试，失败降级）                    │
│  ⑤ 包装为 <script>…</script>，写入 dist/<ver>.js                     │
│  输出：combineState, preprocessFile, combineFile                      │
└──────────────────────────────┬──────────────────────────────────────┘
                               │ combineFile = dist/<ver>.js
                               ▼
┌─────────────────────────────────────────────────────────────────────┐
│  inject-html.js  阶段2：注入                                         │
│  ① 读取待注入内容 combineFile                                        │
│  ② 读取目标 HTML（有 before_handler 时用 preprocessFile，否则用原文件）│
│  ③ 找到占位符（默认 </body>），在其位置拼入脚本                        │
│  ④ 写出 *.rmb.html                                                   │
└─────────────────────────────────────────────────────────────────────┘
```

---

## 命令参数

| 脚本 | 参数 | 说明 |
| --- | --- | --- |
| `rtau-markdown-beautify.js` | `html=<path>` | **必填** 目标 HTML 文件路径 |
| | `version=<ver>` | 版本清单名（默认 `latest`）或绝对路径 |
| | `minify=<0\|1>` | `0` 关闭混淆；`1` 强制混淆（默认 `-1` 尝试） |
| | `placeholder=<text>` | 注入占位符（默认 `</body>`） |
| | `output=<path>` | 输出文件路径（默认 `<name>.rmb.<ext>`） |
| | `debug` | **放在末位**，启用调式模式 |
| `combine.js` | `html=<path>` | 读取目标 HTML（before_handler 需要） |
| | `version=<ver>` | 同上 |
| | `minify=<0\|1|-1>` | 混淆开关（默认 `-1`） |
| `inject-html.js` | `inject=<path>` | **必填** 待注入的 `<script>` 文件路径 |
| | `html=<path>` | 目标 HTML 路径 |
| | `preprocessFile=<path>` | before_handler 产物路径（优先于 html） |
| | `placeholder=<text>` | 注入占位符 |
| | `output=<path>` | 输出文件路径 |

---

## 项目结构

```
rtau_markdown_beautify/
├── rtau-markdown-beautify.js     # 编排入口：单命令完成全流程
├── combine.js                    # 阶段1：清单驱动合并 + 混淆 → dist/<ver>.js
├── inject-html.js                # 阶段2：占位符替换注入 → *.rmb.html
├── config/
│   ├── version/                  # 版本清单（一个版本一个 JSON）
│   │   └── latest.json           # 默认读取
│   └── minify.config.json        # javascript-obfuscator 参数
├── src/
│   ├── dependencies/             # 预打包依赖（Viewer.js、ClipboardJS）
│   ├── version/                  # 版本徽章 console.log
│   ├── method/                   # 基础方法（debugmode、customclr、dynamic-style）
│   └── handler/
│       ├── before_handler/       # 构建期预处理 HTML（如 tag-clean-link）
│       └── post_handler/         # 运行时注入脚本（复制、预览、信息框等）
├── assets/readme/                # README 视觉素材
├── dist/                         # 构建产物（gitignored）
└── log/                          # 运行日志（gitignored）
```

> **想深入了解？** 请参阅 [DEV-README.md](./DEV-README.md)，其中包含模块间引用链、版本清单驱动机制、两条 handler 约定、编码易错点、发布检查清单等面向开发者的完整说明。

---

## 当前版本功能清单（v1.6.0）

| 模块 | 类型 | 说明 |
| --- | --- | --- |
| `dependencies` | 运行时依赖 | Viewer.js + ClipboardJS 预打包 |
| `debugmode` | method | 四角显示 `DEBUG_MODE` 标记 |
| `customclr` | method | CSS 变量 `--clr` 读写 |
| `dynamic-style` | method | `addStyle(css)` 工具函数 |
| `copy-inlinecode` | handler | 行内代码点击复制 |
| `img-viewer` | handler | 图片点击预览 |
| `page-end-blank` | handler | 页尾留空，内容显示在屏幕中上部 |
| `show-blockcode-header` | handler | 代码块上方信息框（语言 / 字符数 / 复制） |
| `tag-clean-link` | before_handler | 清理外部 `<link>` 标签（构建期处理） |

---

## License

[MIT](./LICENSE)