RenderingVideo 文档

Code 元素

展示代码片段,适合技术讲解、API 示例和 diff 视频

Code 元素

code 元素用于展示代码片段,适合技术讲解、API 示例、diff 前后的说明视频。

结构

interface CodeClip extends BaseClip {
  type: "code";
  code: string;
  language?: string;
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;
  selection?: any;
}

字段

  • code:代码文本,必填。
  • language:语言标识,当前保留给后续高亮器使用。
  • fontFamily:覆盖 style.fontFamily
  • fontSize:覆盖 style.fontSize
  • lineHeight:覆盖 style.lineHeight
  • selection:透传给 Revideo Code 组件。

示例

{
  "type": "code",
  "start": 0,
  "duration": 4,
  "code": "const video = renderJson({ effects: ['code'] });",
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": 900,
    "height": 360
  },
  "style": {
    "fontSize": 42,
    "fill": "#dbeafe"
  },
  "transition": {
    "type": "blur",
    "duration": 0.4
  }
}