How to Contribute to Documentation

some doc content that you write before...
 
<Callout>
You could write some additional information in that place. You also could use mardown syntax in it such as [link](#) or `code`
</Callout>

<Callout type="info">
your text...
</Callout>

<Comparison
  leftSrc="https://mdn.alipayobjects.com/huamei_rbbfv7/afts/img/A*AxpMSqxO5-IAAAAAAAAAAAAADknZAQ/original"
  leftText="offset: 15.3"
  rightSrc="https://mdn.alipayobjects.com/huamei_rbbfv7/afts/img/A*-Q8FS7vQhkkAAAAAAAAAAAAADknZAQ/original"
  rightText="offset: 20.4"
/>

import { Image } from '@/mdx'
 
<Image src="https://gw.alipayobjects.com/zos/OasisHub/334d8ca3-639f-4cd9-8aaa-93c1da7acdc3/image-20240318173506046.png" figcaption="This is an embedded image using the Image component" />
 

`let x = 1{:ts}`

```ts showLineNumbers filename="example.ts"
class CustomScript extends Script {
  @ignoreClone
  a:boolean = false;
  @assignmentClone
  b:number = 1;
  @shallowClone
  c:Vector3[] = [new Vector3(0,0,0)];
}
```
 
上面的语法产生的效果如下：
 
```ts showLineNumbers filename="example.ts"
class CustomScript extends Script{
  @ignoreClone
  a:boolean = false;
  @assignmentClone
  b:number = 1;
  @shallowClone
  c:Vector3[] = [new Vector3(0,0,0)];
}
 
<Callout type='info'>
使用文件名的场景可能并不常见，但某些情况下显示文件名是有必要的。譬如，对于 `project.json` 或 `Scene.json` 这种文件内容，增加文件名的显示可以更直观的传递信息。
</Callout>
 
#### 行高亮
 
````md filename="Markdown"
```ts {1,4-5}
async function setupDefaultScene(scene: Scene){
  const root = scene.createRootEntity();
  const cameraEntity = root.createChild();
  cameraEntity.transform.setPosition(0, 0, 10);
  cameraEntity.addComponent(Camera);
  cameraEntity.addComponent(OrbitControl);
}
```
 
通过 `{1,4-5}` 这样的语法，我们可以同时实现单行高亮和多行高亮的功能。
 
```js {1,4-5} showLineNumbers
async function setupDefaultScene(scene: Scene) {
  const root = scene.createRootEntity();
  const cameraEntity = root.createChild();
  cameraEntity.transform.setPosition(0, 0, 10);
  cameraEntity.addComponent(Camera);
  cameraEntity.addComponent(OrbitControl);
}
 
#### 指定代码高亮
 
在某些情况下，你可能需要用户关注某一个关键方法，或某一个类的名称。这时候就可以使用 ` ```ts /specularTexture/ ` 语法来实现指定代码高亮的功能。
 
````md filename="Markdown"
```ts /specularTexture/
  engine.resourceManager
    .load<AmbientLight>({
      type: AssetType.Env,
      url: "https://gw.alipayobjects.com/os/bmw-prod/6470ea5e-094b-4a77-a05f-4945bf81e318.bin",
    })
    .then((ambientLight) => {
      scene.ambientLight = ambientLight;
      skyMaterial.texture = ambientLight.specularTexture;
      skyMaterial.textureDecodeRGBM = true;
      openDebug(ambientLight.specularTexture);
      engine.run();
    });
```

engine.resourceManager
  .load<AmbientLight>({
    type: AssetType.Env,
    url: "https://gw.alipayobjects.com/os/bmw-prod/6470ea5e-094b-4a77-a05f-4945bf81e318.bin",
  })
  .then((ambientLight) => {
    scene.ambientLight = ambientLight;
    skyMaterial.texture = ambientLight.specularTexture;
    skyMaterial.textureDecodeRGBM = true;
    openDebug(ambientLight.specularTexture);
    engine.run();
  });
 
 
### 示例 
 
#### 编写示例代码
 
我们现在提供两种方式让你组织示例代码：
 
- 在 `examples/` 文件夹下新建 `.ts` 示例文件来组织示例代码
- 在 `examples/` 文件夹下新建一个 **示例文件夹**，最后通过 `示例文件夹/index.ts` 来暴露示例代码
 
#### 嵌入示例
 
````mdx filename="light.mdx"
...
 
Ambient light emits from all directions and enters the eye, as shown in the example below:
 
<Playground href="/embed/ambient-light" />
 
...