博客原文：Codelab 格式规范 - 构建你自己的 Codelab 学习系统

相信很多人都看过 Google 的 Codelab 课程，形式非常不错。

那么我们自己怎么写一个 Codelab 页面呢? 很简单，只要按照这篇格式规范写一篇文档，再使用 claat 工具就能自动生成学习页面了。

原文文档：Codelab Formatting Guide 你需要先加入 Google 社区来获取阅读权限。

开始

把这篇文档拷贝到你的google文档，按你的需求修改它的 metadata，然后通过下面的方式就可以以 codelab 的方式预览它了。两种方式：

安装 Preview Codelab Chrome extension 插件，打开文档，然后点击插件栏里的图标
手动访问 https://codelabs-preview.appspot.com/?file_id=<google-doc-id>

格式参考

1. 目录

所有 Heading 1 自动被转成 codelab 目录

2. Codelab Metadata

定义一些文档属性,类似于普通文件右键菜单里的内容，会在合适的地方显示。都比较好理解。


Summary	In this codelab, you'll learn how to get your Android app indexed by Google Search.
URL	app-indexing
Category	Search
Status	Draft
Feedback Link	https://github.com/google/search-samples/issues
Analytics Account	Google Analytics ID

3. Headers

codelab 里的每一个步骤，应该使用 Heading 2、Heading 3、Heading 4 来组织结构，他们会被转成 <h2> <h3> <h4>

另外，如果你想加一些额外的信息，可以在第一个 Heading 1 之前添加任意的 H2 H3 H4, H1 前的所有内容都不会显示。

4. 文本样式

别改字体了，没卵用。都会被自动转成 Roboto 字体。但是粗体斜体什么的没问题。

5. 响应式图片

在你的文档里，你可以任意更改图片尺寸。你设尺寸会被当成图片的max-width。在小尺寸的浏览器上已不用担心显示问题，会自动缩放。

6. Info Boxes

使用这两种样式要慎重，不是非常重要的信息不要使用。

用法也很简单，建一个 1x1 的表格，背景分别使用 light green 3 和 light orange 3就可以了。

7. 命令行片段

用法也很简单，1x1 的表格，字体使用 Consolas 就可以了。

8. 代码片段

和命令行一样，1x1 的表格，不过字体使用 Courier New。

标题建议使用 Heading 3，如果有 Github 链接也把连接加上，codelab 会自动在标题前面加上 Github 图标。

9. FAQ

如果你的 FAQ 部分有链接，这样写：标题为 Heading 3 的 Frequently Asked Questions, 下面跟上你的问题链接列表就行，像这样：

Frequently Asked Questions

codelab 会自动加上这几个网站的图标。

10. 下载按钮

把下载链接的背景色设置为 dark green 1, 并且文字内容以 Download开头，就会自动转为下载按钮样式。

11. 每一步的时间

在标题下用 dark grey 1 写：Duration: xx:xx 即可

不写默认是 1:00，最后一页是 0

12. 分场景步骤

不同场景可能需要不同的页面，设置方法和 duration 很像：

13. 导入片段

可以使用 import 语法导入其它 codelab 里的步骤

[[import funny dog]]

14. 记录上次学习位置

自动记录，不用设置

15. Feedback 链接

在 metadata 设置 Feedback Link 字段会自动生成。

16. 调查

1x1 的表格，设置 light blue 3 背景，标题使用 Heading 4，列表使用 unordered 列表。

17. What you'll learn

这在一个 codelab 项目中非诚重要，一定要写。

使用Heading 2标题的"What you'll learn",加上一个列表：

效果：

标题也可以是： What we've covered 也是同样的效果。

不过不幸的是，看来是不支持标题自动识别了。