相信很多人都看過 Google 的 Codelab 課程，形式非常不錯。
那麼我們自己怎麼寫一個 Codelab 頁面呢? 很簡單，只要按照這篇格式規範寫一篇文檔，再使用 claat 工具 就能自動生成學習頁面了。
原文文檔：Codelab Formatting Guide 你需要先加入 Google 社區 來獲取閱讀權限。
開始
把 這篇文檔 拷貝到你的google文檔，按你的需求修改它的 metadata，然後通過下面的方式就可以以 codelab 的方式預覽它了。 兩種方式：
- 安裝 Preview Codelab Chrome extension 插件，打開文檔，然後點擊插件欄裡的圖標
- 手動訪問 https://codelabs-preview.appspot.com/?file_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 github.com/google/sear… Analytics Account Google Analytics ID
3. Headers
codelab 裡的每一個步驟，應該使用 Heading 2、Heading 3、Heading 4 來組織結構，他們會被轉成
另外，如果你想加一些額外的信息，可以在第一個 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
- How do I install Android Studio?
- How do I enable USE debugging?
- Why doesn't Android Studio see my device?
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 也是同樣的效果。
不過不幸的是，看來是不支持標題自動識別了。
