@ckpack/markdown-wx

将 Markdown 转换为微信小程序富文本格式(https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)

client

通过 markdown-exit 将 markdown 字符串 转为 html

通过插件支持数学公式支持

行内公式 用 单个 $ 包起来：$E = mc^2$ 块级公式 用 双 $$ 包起来：$$E = mc^2$$ 通过插件请求 server 接口 渲染公式内容为 svg

server

通过 katex 将 公式 转为 svg 图片

API

client

createMarkdownWx(options?)

创建一个渲染器。

参数:

• options.markdown: MarkdownExitOptions，透传给 markdown-exit
• options.math: MathPluginOptions，开启数学公式插件

返回:

• { render: (src, env?) => Promise }

示例:

import { createMarkdownWx } from '@ckpack/markdown-wx';

const renderer = createMarkdownWx({
  math: { endpoint: 'http://localhost:3000/katex' }
});

const html = await renderer.render('# Hello $E=mc^2$');

renderMarkdownToWx(src, options?)

一键渲染。

参数:

• src: markdown 字符串
• options: 同 createMarkdownWx

返回:

• Promise (HTML)

示例:

import { renderMarkdownToWx } from '@ckpack/markdown-wx';

const html = await renderMarkdownToWx('$$E=mc^2$$', {
  math: { endpoint: 'http://localhost:3000/katex' }
});

mathPlugin(options?)

数学公式插件。

MathPluginOptions:

• render?: (context) => Promise | string 直接提供渲染函数，返回 svg 字符串
• endpoint?: string 公式渲染服务地址 (POST JSON 或 GET query)
• fetch?: FetchLike 自定义 fetch 实现 (微信小程序可用 createWxRequestFetchLike)
• requestInit?: FetchInit | ((context) => FetchInit) 自定义请求参数
• output?: 'img' | 'svg' 输出为 img(data uri) 或直接嵌入 svg，默认 'img'
• svgToDataUri?: (svg) => string 自定义 svg -> data uri
• inlineClassName?: string 行内公式 class
• blockClassName?: string 块级公式 class

MathRenderContext:

• formula: string
• displayMode: boolean

示例(自定义 render):

import { createMarkdownWx } from '@ckpack/markdown-wx';

const renderer = createMarkdownWx({
  math: {
    render: ({ formula, displayMode }) =>
      `<svg xmlns="http://www.w3.org/2000/svg"><text>${displayMode ? 'block:' : 'inline:'}${formula}</text></svg>`
  }
});

createWxRequestFetchLike(wxRequest?, options?)

将微信小程序的 wx.request 封装成 FetchLike。

参数:

• wxRequest?: WxRequest (默认使用全局 wx.request)
• options.dataType?: string (默认 'text')
• options.responseType?: string
• options.timeout?: number

返回:

• FetchLike

示例:

import { createMarkdownWx, createWxRequestFetchLike } from '@ckpack/markdown-wx';

const fetchLike = createWxRequestFetchLike();

const html = await createMarkdownWx({
  math: {
    endpoint: 'https://example.com/katex',
    fetch: fetchLike
  }
}).render('$E=mc^2$');

小程序组件 (markdown-wx)

提供一个微信小程序自定义组件，内部基于 createMarkdownWx 渲染。

组件属性:

• src: markdown 字符串
• html: 直接传入 html (优先于 src)
• options: MarkdownWxOptions (建议仅使用可序列化字段，如 math.endpoint)
• env: 透传给 render 的 env
• autoRender: 是否自动渲染 (默认 true)
• selectable: rich-text selectable (默认 false)

事件:

• rendered: 渲染成功，detail { html, src }
• error: 渲染失败，detail { error }

示例:

<markdown-wx id="md" src="{{markdown}}" options="{{mdOptions}}" bind:rendered="onRendered" />

Page({
  data: {
    markdown: '# Hello $E=mc^2$',
    mdOptions: { math: { endpoint: 'https://example.com/katex' } }
  },
  onRendered(e) {
    console.log('html', e.detail.html);
  }
});

server

renderFormulaToSvg(formula, options?)

将公式渲染为 svg 字符串。

参数:

• formula: string
• options: RenderFormulaOptions (katex 选项 + displayMode? + css?)

示例:

import { renderFormulaToSvg } from '@ckpack/markdown-wx';

const svg = renderFormulaToSvg('E = mc^2', { displayMode: true });

createMathSvgHandler(options?)

创建一个 Node HTTP handler，处理公式渲染请求。

参数:

• path?: string (默认 '/katex')
• cors?: boolean (默认 true)
• maxBodySize?: number (默认 1MB)
• 其余字段同 RenderFormulaOptions

请求格式:

• GET /katex?formula=...&displayMode=true
• POST /katex { "formula": "...", "displayMode": true }

createMathSvgServer(options?)

快速创建 HTTP Server。

示例:

import { createMathSvgServer } from '@ckpack/markdown-wx/server';

const server = createMathSvgServer({ path: '/katex' });
server.listen(3000);

getKatexCss()

返回内置的 KaTeX CSS 字符串，可复用或缓存。