gh_mirrors/car/carbon API完全指南：集成你的应用从未如此简单

gh_mirrors/car/carbon API完全指南：集成你的应用从未如此简单

【免费下载链接】carbon项目地址: https://gitcode.com/gh_mirrors/car/carbon

carbon是一个强大的代码美化和分享工具，通过其API可以轻松将代码美化功能集成到你的应用中。本文将详细介绍carbon API的使用方法，帮助开发者快速实现代码图片生成和嵌入功能，让代码分享变得更加简单高效。

快速了解carbon API

carbon提供了两个核心API端点，分别用于生成代码图片和获取嵌入代码，满足不同场景下的集成需求。

核心API端点概览

• 图片生成API：pages/api/image/[id].js

  • 功能：根据代码片段和样式配置生成高质量代码图片
  • 支持GET和POST两种请求方式
  • 响应：返回PNG格式的图片数据

• 嵌入API：pages/api/oembed.js

  • 功能：生成可嵌入到网页中的iframe代码
  • 遵循oEmbed标准（https://oembed.com/）
  • 响应：返回包含嵌入HTML的JSON数据

图片生成API使用详解

图片生成API是carbon最核心的功能接口，通过它可以将任意代码片段转换为美观的图片。

基础请求方式

GET请求示例：

https://your-carbon-instance.com/api/image?code=console.log('Hello%20World')&theme=one-dark&language=javascript

POST请求示例：

{ "code": "console.log('Hello World')", "theme": "one-dark", "language": "javascript", "fontSize": 14, "lineNumbers": true }

主要参数说明

响应处理

API返回PNG格式的图片数据，在前端可以直接通过<img>标签展示：

<img src="https://your-carbon-instance.com/api/image?code=console.log('Hello%20World')" alt="carbon代码图片">

嵌入API使用指南

嵌入API遵循oEmbed标准，方便将carbon代码片段嵌入到各种内容平台。

请求格式

https://your-carbon-instance.com/api/oembed?url=https://carbon.now.sh/abc123&maxwidth=800&maxheight=600

响应示例

{ "version": "1.0", "type": "rich", "provider_name": "Carbon", "width": 800, "height": 450, "html": "<iframe src='https://carbon.now.sh/embed/abc123' width='800' height='450' style='border:0; overflow:auto;' sandbox='allow-scripts allow-same-origin' scrolling='auto'></iframe>" }

实际应用

在网页中嵌入carbon代码片段只需将返回的html字段直接插入到页面中即可：

<div class="code-embed"> <!-- 嵌入API返回的iframe代码 --> </div>

开始使用carbon API

准备工作

1. 克隆carbon仓库：

git clone https://gitcode.com/gh_mirrors/car/carbon cd carbon

2. 安装依赖：

yarn install

3. 启动开发服务器：

yarn dev

API调用示例代码

Node.js示例：

const axios = require('axios'); const fs = require('fs'); async function generateCodeImage() { try { const response = await axios.post('http://localhost:3000/api/image', { code: 'function greeting() { return "Hello, Carbon API!"; }', theme: 'nord', language: 'javascript', lineNumbers: true }); // 保存图片 const base64Data = response.data.split(',')[1]; fs.writeFileSync('code-snippet.png', base64Data, 'base64'); console.log('图片生成成功！'); } catch (error) { console.error('生成图片失败:', error); } } generateCodeImage();

常见问题与解决方案

CORS问题

如果在前端直接调用API出现跨域错误，可以通过配置next.config.js文件解决：

// next.config.js module.exports = { async headers() { return [ { source: '/api/:path*', headers: [ { key: 'Access-Control-Allow-Origin', value: '*' }, { key: 'Access-Control-Allow-Methods', value: 'GET,POST,OPTIONS' }, ], }, ]; }, };

性能优化

对于高频API调用，建议实现缓存机制，避免重复生成相同的代码图片。可以使用Redis等缓存服务，根据代码内容和配置参数生成唯一key进行缓存。

总结

carbon API为开发者提供了简单而强大的代码图片生成和嵌入功能，通过本文介绍的方法，你可以轻松将这一功能集成到自己的应用中。无论是开发文档、技术博客还是在线教育平台，carbon API都能帮助你展示美观的代码示例，提升用户体验。

现在就开始使用carbon API，让你的代码分享变得更加专业和高效！

【免费下载链接】carbon项目地址: https://gitcode.com/gh_mirrors/car/carbon