洛谷 Markdown 渲染器

提供两个独立的 Markdown 渲染器，输出纯 HTML 字符串（不含 CSS）。

• 旧版 (render-old.js)：基于 markdown-it，轻量稳定，用于剪贴板、个人主页等
• 新版 (render-new.js)：基于 remark + rehype，支持洛谷扩展语法（容器、对齐、表格合并、代码块行号/高亮等），用于文章、题目等

安装

npm install luogu-renderer

import { render as renderOld } from 'luogu-renderer/old';
import { render as renderNew } from 'luogu-renderer/new';

const html = await renderNew('# 标题 $E=mc^2$');

文件结构

render-old.js                # 旧版渲染器源码（ESM）
render-new.js                # 新版渲染器源码（ESM）
dist/
├── luogu-old-renderer.iife.js   # 旧版 IIFE（<script> 引入）
└── luogu-new-renderer.iife.js   # 新版 IIFE

CDN 链接（jsDelivr）

| 渲染器 | 全局变量名 | CDN | |--------|------------|-----| | 旧版 | LuoguOldRenderer | https://cdn.jsdelivr.net/npm/luogu-renderer/dist/luogu-old-renderer.iife.js | | 新版 | LuoguNewRenderer | https://cdn.jsdelivr.net/npm/luogu-renderer/dist/luogu-new-renderer.iife.js |

功能对比

| 特性 | 旧版 | 新版 | |------|:----:|:----:| | GFM（表格、任务列表、删除线） | ✅ | ✅ | | 数学公式（行内 $...$ / 块级 $$...$$） | ✅ | ✅ | | 代码高亮 | ✅（highlight.js） | ✅（Prism） | | 脚注 / 定义列表 / 缩写 / 上下标 | ❌ | ✅ | | :::info/warning/error/success 容器 | ❌ | ✅ | | :::align{center/left/right} 对齐 | ❌ | ✅ | | 表格合并（^ 跨行，> 跨列） | ✅ | ✅ | | 代码块行号（line-numbers） | ❌ | ✅ | | 代码块行高亮（lines=1-5,7） | ❌ | ✅ | | Tuack 风格表格（::cute-table{tuack}） | ❌ | ✅ | | 题头（epigraph） | ❌ | ✅ |

用法

浏览器（IIFE）

<script src="https://cdn.jsdelivr.net/npm/luogu-renderer/dist/luogu-new-renderer.iife.js"></script>
<script>
LuoguNewRenderer.render("# 标题 $E=mc^2$").then(html => {
  document.getElementById('preview').innerHTML = html;
});
</script>

两个渲染器均暴露为对象，调用 .render(markdown) 返回 Promise<string>。

Node.js（ESM）

import { render } from 'luogu-renderer/new';
// 或 import { render } from 'luogu-renderer/old';

const html = await render(`:::info
这是一个提示容器
:::

\`\`\`js line-numbers lines=2-3
console.log("第一行");
console.log("第二行");
console.log("第三行");
\`\`\``);

样式说明

渲染器不含 CSS。需要自行引入：

• KaTeX：https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css
• 代码高亮：Prism 或 highlight.js 主题
• 容器/行号等：参考输出 HTML 类名自定义样式

本地构建

npm install
npm run build:new    # 新版
npm run build:old    # 旧版
npm run build        # 全部

许可证

AGPL-3.0