部落格原文：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 | 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
使用這兩種樣式要慎重，不是非常重要的資訊不要使用。
用法也很簡單，建一個 1×1 的表格，背景分別使用 light green 3 和 light orange 3就可以了。
7. 命令列片段
用法也很簡單，1×1 的表格，字型使用 Consolas 就可以了。
8. 程式碼片段
和命令列一樣，1×1 的表格，不過字型使用 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. 調查
1×1 的表格，設定 light blue 3 背景，標題使用 Heading 4，列表使用 unordered 列表。
17. What you’ll learn
這在一個 codelab 專案中非誠重要，一定要寫。
使用Heading 2標題的”What you’ll learn”,加上一個列表：
效果：
標題也可以是：What we’ve covered 也是同樣的效果。
不過不幸的是，看來是不支援標題自動識別了。