相信很多人都看過 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 github.com/google/sear… 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 QuestionsHow do I install Android Studio?How do I enable USE debugging?Why doesn't Android Studio see my device?

codelab 會自動加上這幾個網站的圖示。

把下載連結的背景色設定為 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 欄位會自動生成。

1x1 的表格，設定 light blue 3 背景，標題使用 Heading 4，列表使用 unordered 列表。

17. What you'll learn

這在一個 codelab 專案中非誠重要，一定要寫。

使用Heading 2標題的"What you'll learn",加上一個列表：

效果：

標題也可以是： What we've covered 也是同樣的效果。

不過不幸的是，看來是不支援標題自動識別了。