使用puppeteer将markdown转换为图片
karin 根目录执行以下命令即可开箱使用
pnpm add @karinjs/plugin-markdown -w你可以在
karin/config/plugin/@karinjs/plugin-markdown/config.yaml中配置
# 权限配置 "master" | "admin" | "group.owner" | "group.admin" | "all"
permission: master
# 像素比 越高越清晰 但是会减缓渲染速度
deviceScaleFactor: 3
# 页面加载状态 'load'|'domcontentloaded'|'networkidle0'|'networkidle2'
# load: 页面完全加载
# domcontentloaded: DOMContentLoaded 事件触发 如果纯静态可以使用
# networkidle0: 500ms内没有网络连接
# networkidle2: 500ms内网络连接数小于2
waitUntil: networkidle2
# markedKatex配置 详情查看https://katex.org/docs/options.html
markedKatex:
# 输出格式 html | mathml | htmlAndMathml
output: htmlAndMathml
throwOnError: false
#md + markdown内容
#md + 任何文件
举例：
点击展开查看高级示例
#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");