檢視 Tool:Tool:AI工具的原始碼

<div style="background-color: #2c3e50; color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<div style="font-size: 2em; font-weight: bold; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 10px;">VS Code × Quarto 環境建置與實作指南</div>
<div style="font-size: 1.1em; opacity: 0.9;">
🚫 <b>無須範例檔</b> | 🚀 <b>從零開始 (From Scratch)</b> | 🎓 <b>適用於論文、講義與報告</b>
</div>
</div>

== 🛠️ 一、安裝清單 (必備環境) ==
<div style="background-color: #fff3cd; border-left: 6px solid #ffc107; padding: 10px; margin: 15px 0;">
'''注意：''' 請務必依照下列順序安裝，這是運作的基礎。
</div>

{| class="wikitable" style="width:100%; border-collapse: collapse;"
|- style="background-color: #f8f9fa; text-align: left;"
! style="padding: 10px;" | 步驟
! style="padding: 10px;" | 軟體名稱
! style="padding: 10px;" | 功能說明
! style="padding: 10px;" | 安裝與檢查方式
|-
| align="center" | 1
| '''[https://code.visualstudio.com/ Visual Studio Code]'''
| 編輯器主程式
| 下載後安裝即可。
|-
| align="center" | 2
| '''[https://quarto.org/download Quarto CLI]'''
| 轉換核心 (Markdown → PDF/HTML)
| 安裝後，開啟終端機輸入 <code>quarto check</code> 測試。
|-
| align="center" | 3
| '''TeX 系統'''
| PDF 輸出引擎
| 
* '''macOS:''' 安裝 [https://www.tug.org/mactex/ MacTeX]
* '''Windows:''' 安裝 [https://miktex.org/download MiKTeX]
|-
| align="center" | 4
| '''[https://graphviz.org/download Graphviz]'''
| 流程圖繪製工具
| 安裝後輸入 <code>dot -V</code> 測試。<br>''(Windows 安裝時請勾選 "Add to PATH")''
|}

== 🧩 二、VS Code 擴充套件設定 ==
請開啟 VS Code 左側 '''Extensions''' (方塊圖示)，搜尋並安裝以下套件：

{| class="wikitable" style="width:100%;"
! 套件名稱 !! 重要性 !! 功能
|-
| '''Quarto''' || style="color:red; font-weight:bold;" | ★★★ || 官方外掛，提供語法高亮、預覽與自動補全。
|-
| '''Markdown All in One''' || ★★☆ || 自動編號、目錄生成、快捷鍵優化。
|-
| '''Graphviz Preview''' || ★★☆ || 讓你可以直接預覽 <code>.dot</code> 流程圖檔案。
|-
| '''LaTeX Workshop''' || ★☆☆ || 輔助 PDF 輸出除錯與語法檢查。
|}

== 📂 三、建立第一個專案 (手把手教學) ==
因為沒有現成檔案，請依照以下步驟建立你的工作區：

=== 步驟 1：建立資料夾 ===
* 在電腦中建立新資料夾，命名為 <code>My_Quarto_Paper</code>。
* 使用 VS Code 開啟此資料夾。

=== 步驟 2：設定檔 (_quarto.yml) ===
在 VS Code 建立新檔案 <code>_quarto.yml</code>，並貼上以下內容：

<pre style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 5px; border: 1px solid #ddd; overflow-x: auto;">
project:
  title: "我的學術研究專案"
  type: website
  output-dir: docs

format:
  html:
    theme: cosmo
    toc: true
  pdf:
    documentclass: scrartcl
    number-sections: true
</pre>

=== 步驟 3：文獻檔 (references.bib) ===
建立新檔案 <code>references.bib</code>，貼上測試用文獻：

<pre style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 5px; border: 1px solid #ddd; overflow-x: auto;">
@article{Example2025,
  title={Designing with AI: A Practical Guide},
  author={Chiang, Chen-Wei and GPT, Chat},
  journal={Journal of Creative Technology},
  year={2025},
  volume={1},
  pages={1--10}
}
</pre>

=== 步驟 4：主文件 (index.qmd) ===
建立新檔案 <code>index.qmd</code>，這是撰寫論文的地方。請完整複製貼上：

<pre style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 5px; border: 1px solid #ddd; overflow-x: auto;">
---
title: "Quarto 論文實作範例"
author: "你的名字"
date: last-modified
bibliography: references.bib
format:
  html: default
  pdf: default
---

# 緒論 (Introduction)
這是使用 VS Code 與 Quarto 撰寫的第一份文件。我們可以輕鬆整合文字、程式碼與圖表。

## 文獻回顧
根據研究指出，AI 協作能提升設計效率 [@Example2025]。

# 研究方法 (Methodology)
本研究採用 DOT 語言繪製研究架構圖，如下所示：

```{dot}
//| label: fig-flowchart
//| fig-cap: "研究流程圖"

digraph G {
  rankdir=LR;
  fontname="Helvetica";
  node [shape=box, style=filled, fillcolor="#E6F3FF"];
  
  Step1 [label="文獻探討"];
  Step2 [label="建立假說"];
  Step3 [label="實驗驗證"];
  
  Step1 -> Step2 -> Step3;
}
結論 (Conclusion)
Quarto 能夠將上述內容自動排版為高品質的 PDF 與 HTML。 </pre>

== ▶️ 四、編譯與預覽 (Render) ==

<div style="background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 10px; margin: 10px 0;"> 💡 <b>操作技巧：</b> 請確保目前編輯視窗停留在 <code>index.qmd</code> 檔案上。 </div>

點擊 VS Code 右上角的 「Preview」按鈕 (放大鏡與文件圖示)。
或使用快捷鍵：
#* Windows: <code>Ctrl</code> + <code>Shift</code> + <code>K</code> #* macOS: <code>Cmd</code> + <code>Shift</code> + <code>K</code>

'''檢查結果：'''
#* 右側出現 HTML 互動預覽。 #* 資料夾內產生 <code>index.pdf</code> 文件。

== 📄 五、進階：使用 ACM / SIGGRAPH 模板 == 若需投稿學術研討會，請使用官方模板：

開啟 VS Code 終端機 (<code>Ctrl</code> + <code>~</code>)。
輸入指令：<code>quarto add quarto-journals/acm</code> (詢問時按 Y)。
修改 <code>index.qmd</code> 標頭如下：
<pre style="background-color: #f4f4f4; border: 1px solid #ccc; padding: 10px;">
title: "My SIGGRAPH Paper" format: acm-pdf: default <-- 修改這裡 acm-html: default bibliography: references.bib
</pre>

== ❓ 六、常見問題排除 (Troubleshooting) ==

{| class="wikitable" style="width:100%;" ! width="20%" | 問題現象 !! 解決方法 |- | '''PDF 無法產生''' ||

檢查 TeX 系統是否安裝完整。

查看 Log，若 Quarto 詢問是否安裝缺少的套件，請選 '''Yes'''。 |- | '''中文顯示亂碼''' ||

在 PDF 設定加入字型參數：


<code>mainfont: "Microsoft JhengHei"</code> (或 Noto Sans TC) |- | '''DOT 圖表未顯示''' ||

確認已安裝 Graphviz。

Windows 用戶需確認安裝時勾選 '''"Add to PATH"'''。 |}