luogu-renderer 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -0
- package/dist/luogu-new-renderer.iife.js +60378 -0
- package/dist/luogu-old-renderer.iife.js +87062 -0
- package/package.json +58 -0
- package/render-new.js +436 -0
- package/render-old.js +137 -0
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# 洛谷 Markdown 渲染器
|
|
2
|
+
|
|
3
|
+
> **注意**：本仓库已包含打包后的 IIFE 文件，你可以直接使用 CDN 链接，无需本地构建。
|
|
4
|
+
|
|
5
|
+
提供两个独立的 Markdown 渲染器，输出纯 HTML 字符串（**不含 CSS**）。
|
|
6
|
+
|
|
7
|
+
- **旧版** (`render-old.js`)：基于 markdown-it，轻量稳定，用于剪贴板、个人主页等
|
|
8
|
+
- **新版** (`render-new.js`)：基于 remark + rehype，支持洛谷扩展语法（容器、对齐、表格合并、代码块行号/高亮等），用于文章、题目等
|
|
9
|
+
|
|
10
|
+
## 安装
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install luogu-renderer
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
import { render as renderOld } from 'luogu-renderer/old';
|
|
18
|
+
import { render as renderNew } from 'luogu-renderer/new';
|
|
19
|
+
|
|
20
|
+
const html = await renderNew('# 标题 $E=mc^2$');
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## 文件结构
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
render-old.js # 旧版渲染器源码（ESM）
|
|
27
|
+
render-new.js # 新版渲染器源码（ESM）
|
|
28
|
+
dist/
|
|
29
|
+
├── luogu-old-renderer.iife.js # 旧版 IIFE（<script> 引入）
|
|
30
|
+
└── luogu-new-renderer.iife.js # 新版 IIFE
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## CDN 链接（jsDelivr）
|
|
34
|
+
|
|
35
|
+
| 渲染器 | 全局变量名 | CDN |
|
|
36
|
+
|--------|------------|-----|
|
|
37
|
+
| 旧版 | `LuoguOldRenderer` | `https://cdn.jsdelivr.net/npm/luogu-renderer/dist/luogu-old-renderer.iife.js` |
|
|
38
|
+
| 新版 | `LuoguNewRenderer` | `https://cdn.jsdelivr.net/npm/luogu-renderer/dist/luogu-new-renderer.iife.js` |
|
|
39
|
+
|
|
40
|
+
## 功能对比
|
|
41
|
+
|
|
42
|
+
| 特性 | 旧版 | 新版 |
|
|
43
|
+
|------|:----:|:----:|
|
|
44
|
+
| GFM（表格、任务列表、删除线） | ✅ | ✅ |
|
|
45
|
+
| 数学公式（行内 `$...$` / 块级 `$$...$$`） | ✅ | ✅ |
|
|
46
|
+
| 代码高亮 | ✅（highlight.js） | ✅（Prism） |
|
|
47
|
+
| 脚注 / 定义列表 / 缩写 / 上下标 | ❌ | ✅ |
|
|
48
|
+
| `:::info/warning/error/success` 容器 | ❌ | ✅ |
|
|
49
|
+
| `:::align{center/left/right}` 对齐 | ❌ | ✅ |
|
|
50
|
+
| 表格合并（`^` 跨行，`>` 跨列） | ✅ | ✅ |
|
|
51
|
+
| 代码块行号（`line-numbers`） | ❌ | ✅ |
|
|
52
|
+
| 代码块行高亮（`lines=1-5,7`） | ❌ | ✅ |
|
|
53
|
+
| Tuack 风格表格（`::cute-table{tuack}`） | ❌ | ✅ |
|
|
54
|
+
| 题头（epigraph） | ❌ | ✅ |
|
|
55
|
+
|
|
56
|
+
## 用法
|
|
57
|
+
|
|
58
|
+
### 浏览器（IIFE）
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<script src="https://cdn.jsdelivr.net/npm/luogu-renderer/dist/luogu-new-renderer.iife.js"></script>
|
|
62
|
+
<script>
|
|
63
|
+
LuoguNewRenderer.render("# 标题 $E=mc^2$").then(html => {
|
|
64
|
+
document.getElementById('preview').innerHTML = html;
|
|
65
|
+
});
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
两个渲染器均暴露为对象，调用 `.render(markdown)` 返回 `Promise<string>`。
|
|
70
|
+
|
|
71
|
+
### Node.js（ESM）
|
|
72
|
+
|
|
73
|
+
```js
|
|
74
|
+
import { render } from 'luogu-renderer/new';
|
|
75
|
+
// 或 import { render } from 'luogu-renderer/old';
|
|
76
|
+
|
|
77
|
+
const html = await render(`:::info
|
|
78
|
+
这是一个提示容器
|
|
79
|
+
:::
|
|
80
|
+
|
|
81
|
+
\`\`\`js line-numbers lines=2-3
|
|
82
|
+
console.log("第一行");
|
|
83
|
+
console.log("第二行");
|
|
84
|
+
console.log("第三行");
|
|
85
|
+
\`\`\``);
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## 样式说明
|
|
89
|
+
|
|
90
|
+
渲染器不含 CSS。需要自行引入：
|
|
91
|
+
|
|
92
|
+
- **KaTeX**：`https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css`
|
|
93
|
+
- **代码高亮**：Prism 或 highlight.js 主题
|
|
94
|
+
- **容器/行号等**：参考输出 HTML 类名自定义样式
|
|
95
|
+
|
|
96
|
+
## 本地构建
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
npm install
|
|
100
|
+
npm run build:new # 新版
|
|
101
|
+
npm run build:old # 旧版
|
|
102
|
+
npm run build # 全部
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 许可证
|
|
106
|
+
|
|
107
|
+
AGPL-3.0
|