Tool:Tool:QUARTO
VS Code × Quarto 環境建置與使用教學
一、安裝清單
下列項目為使用 VS Code 撰寫、編譯與預覽 Quarto 專案（SIGGRAPH Asia 論文、課程講義、研究報告）所需的全部環境。
| 類別 | 名稱 | 功能說明 | 安裝方式 |
|---|---|---|---|
| Quarto 主程式 | Quarto CLI | Markdown → PDF / HTML / LaTeX 論文轉換核心 | 下載後安裝，終端機輸入 quarto check 測試
|
| TeX 系統 | macOS：MacTeX Windows：MikTeX Linux：TeX Live Full |
用於輸出 PDF（含 ACM acmart 模板） | 安裝後輸入 kpsewhich acmart.cls 檢查
|
| Graphviz | Graphviz | 繪製 DOT 流程圖與研究架構圖 | 安裝後輸入 dot -V 測試
|
| VS Code 編輯器 | Visual Studio Code | 撰寫與預覽 Quarto 檔案 | 下載後安裝即可 |
---
二、VS Code 必裝擴充套件
於 VS Code 左側 Extensions 搜尋並安裝以下外掛：
| 套件名稱 | 功能說明 |
|---|---|
| Quarto | 官方外掛，提供編譯、Render、Preview 與語法高亮（必裝） |
| Markdown All in One | 改善 Markdown 編輯體驗，自動標題、快速格式化、目錄生成功能 |
| LaTeX Workshop | LaTeX 文件輔助、PDF 即時預覽與錯誤提示 |
| Graphviz Preview（可選） | 於 VS Code 內直接預覽 .dot 或 Quarto Graphviz 圖 |
| Better BibTeX for Zotero（Zotero 外掛） | 自動產生引用鍵與 BibTeX 檔，供 Quarto 文獻引用 |
---
三、環境測試
開啟終端機輸入：
quarto check
若顯示：
✓ Checking versions... ✓ Pandoc found ✓ TeX found ✓ Graphviz found
代表環境安裝成功。
---
四、專案結構
建立或開啟範例專案：
siggraph_quarto_template/ ├─ _quarto.yml ├─ siggraph.qmd ├─ siggraph_bilingual.qmd ├─ references.bib ├─ figures/ │ └─ dot-graphs/ └─ README.md
---
五、基本使用步驟
1. 開啟檔案
開啟 siggraph.qmd 或 siggraph_bilingual.qmd。
2. 編輯 Markdown 內容
# Introduction This paper explores... ## Related Work Haraway argues that... [@Haraway2016]
3. 插入 DOT 流程圖
```{dot}
digraph Example {
rankdir=LR;
A[label="Concept"];
B[label="Artifact"];
A -> B;
}