painter-highlight

一个基于 highlight.js 的高亮代码图片生成工具，支持两种渲染引擎（canvas 原生绘制 / painter-kernel 视图系统），用于快速生成带语法高亮的代码截图。

使用场景：分享代码片段到不支持高亮的平台、VSCode 插件、社交媒体、文档等。

安装

npm install painter-highlight
# 或
yarn add painter-highlight

快速开始

import phl from 'painter-highlight';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

await phl({
  canvasNode: canvas,
  ctx,
  code: 'const x = 42;',
  language: 'javascript',
});

API

phl(options: RenderOptions): Promise<void>

生成高亮代码图片到指定 canvas。

参数：RenderOptions

| 字段 | 类型 | 必需 | 说明 | |------|------|------|------| | canvasNode | HTMLCanvasElement | ✅ | 目标 canvas 元素 | | ctx | CanvasRenderingContext2D | ✅ | canvas 上下文（通过 getContext('2d') 获取） | | code | string | ✅ | 要高亮的代码 | | language | string | ✅ | 代码语言（如 'javascript', 'typescript', 'python' 等） | | renderer | 'canvas' \| 'kernel' | ❌ | 渲染引擎，默认 'canvas' | | theme | 'githubDark' \| 'dracula' \| 'oneDark' | ❌ | 主题，默认 'githubDark' | | lineNumber | boolean | ❌ | 是否显示行号，默认 false | | title | string | ❌ | 窗口标题（显示在顶部），默认 undefined | | fontSize | number | ❌ | 字体大小（像素），默认 14 | | width | number | ❌ | 自定义宽度（像素），默认自动计算 | | height | number | ❌ | 自定义高度（像素），默认自动计算 | | borderRadius | number | ❌ | 圆角半径（像素），默认 8 |

使用示例

基础用法

import phl from 'painter-highlight';

const canvas = document.getElementById('code-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

await phl({
  canvasNode: canvas,
  ctx,
  code: `function hello() {
  console.log('Hello, World!');
}`,
  language: 'javascript',
  title: 'hello.js',
  lineNumber: true,
});

选择主题

await phl({
  canvasNode: canvas,
  ctx,
  code: 'const x = 42;',
  language: 'javascript',
  theme: 'dracula',  // 或 'oneDark'、'githubDark'
});

选择渲染引擎

Canvas 渲染（默认，性能好，兼容性强）：

await phl({
  canvasNode: canvas,
  ctx,
  code: 'const x = 42;',
  language: 'javascript',
  renderer: 'canvas',
});

Painter-Kernel 渲染（特殊小程序环境，需要支持 painter-kernel）：

await phl({
  canvasNode: canvas,
  ctx,
  code: 'const x = 42;',
  language: 'javascript',
  renderer: 'kernel',
});

完整示例（Vue 3）

<template>
  <div class="demo">
    <div class="controls">
      <input v-model="code" type="textarea" placeholder="输入代码..." />
      <select v-model="language">
        <option value="javascript">JavaScript</option>
        <option value="typescript">TypeScript</option>
        <option value="python">Python</option>
      </select>
      <select v-model="theme">
        <option value="githubDark">GitHub Dark</option>
        <option value="dracula">Dracula</option>
        <option value="oneDark">One Dark</option>
      </select>
      <button @click="generate">生成</button>
    </div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import phl from 'painter-highlight';

const canvas = ref<HTMLCanvasElement>();
const code = ref('const x = 42;');
const language = ref('javascript');
const theme = ref('githubDark');

const generate = async () => {
  if (!canvas.value) return;
  const ctx = canvas.value.getContext('2d')!;
  await phl({
    canvasNode: canvas.value,
    ctx,
    code: code.value,
    language: language.value,
    theme: theme.value as any,
    lineNumber: true,
    title: 'code.js',
  });
};
</script>

主题

内置 3 个主题，覆盖常见配色：

• githubDark - GitHub 深色主题（默认）
• dracula - Dracula 经典主题
• oneDark - One Dark Pro 主题

可通过 THEMES 导出查看完整主题定义：

import { THEMES } from 'painter-highlight';
console.log(THEMES.githubDark);

渲染流程

代码 (string)
    ↓
tokenize (highlight.js 解析)
    ↓
Token 流
    ↓
layout (按行切割、计算列宽)
    ↓
CodeDoc
    ↓
theme (解析配色方案)
    ↓
Theme
    ↓
Renderer (canvas 或 kernel)
    ↓
Canvas 图片

Demo

本地开发查看两个渲染引擎的并排对比：

npm run demo

然后打开 http://localhost:8000，可以：

• 选择代码预设（TypeScript、中文注释、深层缩进、长行）
• 实时调整语言、主题、行号、标题
• 并排比较两个渲染引擎的效果差异

特性

• ✅ 两种渲染引擎（Canvas 原生 / Painter-Kernel 视图系统）
• ✅ 3 个内置主题（GitHub Dark / Dracula / One Dark）
• ✅ CJK 宽字符处理（中文、日文、韩文等）
• ✅ 行号支持
• ✅ 自定义标题栏
• ✅ 自动或手动尺寸设定
• ✅ 圆角窗口风格
• ✅ highlight.js 全语言支持

贡献

欢迎提交 Issue 和 PR！

许可

ISC