代码截图美化

将代码片段生成精美的截图，支持多种主题、语言高亮和样式自定义。

代码输入

样式设置

编程语言

主题

窗口样式

标题

内边距

行号阴影

背景色

圆角

预览

index.js

function fibonacci(n) {
  if (n <= 1) return n;
  
  let prev = 0;
  let curr = 1;
  
  for (let i = 2; i <= n; i++) {
    const next = prev + curr;
    prev = curr;
    curr = next;
  }
  
  return curr;
}

// 计算前 10 个斐波那契数
for (let i = 0; i < 10; i++) {
  console.log(`fib(${i}) = ${fibonacci(i)}`);
}

使用说明

本工具用于将代码片段生成精美的截图，适合分享到博客、社交媒体或文档中。

功能特性

基于 Shiki 引擎实现专业级语法高亮，支持 40+ 种语言
12 种精美主题（One Dark、Dracula、Nord、Monokai 等）
macOS / Windows 窗口样式可选，可自定义标题
支持行号显示、阴影、圆角、内边距和背景色自定义
一键导出 PNG / JPG / WebP / SVG 多种格式，支持 1x/2x/3x 倍率

操作步骤

在左侧"代码输入"框中输入或粘贴代码
在"样式设置"中选择编程语言、主题和窗口样式
按需调整标题、内边距、圆角、背景色等参数
勾选"行号"或"阴影"开关以启用对应效果
在右侧预览区查看效果，满意后点击"导出截图"
在导出弹窗中选择格式（PNG/JPG/WebP/SVG）和倍率（1x/2x/3x）

注意事项

SVG 格式为矢量图，适合需要无损缩放的场景
PNG/WebP 为位图，建议使用 2x 或 3x 倍率以获得高清效果
背景色仅影响预览容器背景，代码卡片背景由主题决定
所有渲染在浏览器本地完成，代码不会上传服务器