markdown 转图

使用puppeteer将markdown转换为图片

---

克隆仓库

karin 根目录执行以下命令克隆仓库到本地

git clone https://github.com/karinjs/karin-plugin-markdown.git ./plugins/karin-plugin-markdown

安装依赖

pnpm install --filter=karin-plugin-markdown

指令

#md + markdown内容

举例：

点击展开查看高级示例

#md # 地球的安可<div style="display: flex;">
<p align="left">
  <img src="https://prod-alicdn-community.kurobbs.com/forum/e93296bb45e74a0e9e523120e317794620240521.png" width="700" height="700" align="center">
</p>
<div>

## 想要看我的私房照吗？


> 使用技能

| 参数名 | 参数类型 |
| ------ | ------ |
| 敌人id  | int   |
| 是否长按  | bool   |

<details>
 <summary>安可私房照</summary>
</details>

</div>
<div style="margin-left: 20px; padding-left: 10px; border-left: 1px solid grey;">
<div style="color: green; font-size: 18px; font-weight: bold">
地球的安可
</div>
<div>
地球生物</div>
</div>
</div>

效果展示

点击展开图片查看效果

进阶

当然支持导出使用啦~

举例: 在karin-plugin-example中随便新建一个 js 文件

import fs from "fs";
import markdown from "../karin-plugin-markdown/index.js";

const image = await markdown("# Hello, world!");
// 保存到本地 base64
fs.writeFileSync("./image.jpeg", image.replace("base64://", ""), "base64");

你会在根目录看到一个image.jpeg文件~

更多参数

import fs from "fs";
import markdown from "../karin-plugin-markdown/index.js";

const image = await markdown("# Hello, world!", {
  theme: 2, // 主题设置 0跟随系统 1白天 2黑夜
  waitUntil: "networkidle0", // "networkidle0" | "load" | "domcontentloaded" | "networkidle2"
  deviceScaleFactor: 10, // 像素比 越大越清晰 渲染速度越慢
});
// 保存到本地 base64
fs.writeFileSync("./image.jpeg", image.replace("base64://", ""), "base64");

资源来源

• highlight.min.js:
  • 原始源
  • GitHub
• github.min.css:
  • 原始源
  • GitHub
• katex.min.css:
  • 原始源
  • GitHub
• tex-mml-chtml.js:
  • 原始源
  • GitHub