使用 Dev Container 寫 LaTeX 教學
步驟一:建立 Dockerfile
用VSCode開啟專案資料夾並進入,下載並開啟Docker Desktop (容器環境)。
檔案名稱不能有中文!!!!!!!!!!!
新增 .devcontainer/Dockerfile:
FROM texlive/texlive:latest
# 安裝常用工具
RUN apt-get update && apt-get install -y \
git \
latexmk \
&& rm -rf /var/lib/apt/lists/*Code language: PHP (php)
步驟二:建立 devcontainer.json
新增 .devcontainer/devcontainer.json:
{
"name": "LaTeX",
"build": {
"dockerfile": "Dockerfile"
},
"customizations": {
"vscode": {
"extensions": [
"James-Yu.latex-workshop"
]
}
},
"workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind",
"workspaceFolder": "/workspace"
}
Code language: JSON / JSON with Comments (json)
步驟三:建立 VSCode settings.json
新增 .vscode/settings.json:
{
"latex-workshop.latex.recipes": [
{
"name": "xelatex × 2",
"tools": [
"xelatex",
"xelatex"
]
},
{
"name": "latexmk (xelatex)",
"tools": [
"latexmk-xelatex"
]
}
],
"latex-workshop.latex.tools": [
{
"name": "xelatex",
"command": "xelatex",
"args": [
"-synctex=1",
"-interaction=nonstopmode",
"-file-line-error",
"%DOC%"
]
},
{
"name": "latexmk-xelatex",
"command": "latexmk",
"args": [
"-xelatex",
"-synctex=1",
"-interaction=nonstopmode",
"%DOC%"
]
}
],
"latex-workshop.view.pdf.viewer": "tab",
"latex-workshop.latex.autoBuild.run": "onSave",
"latex-workshop.formatting.latex": "latexindent",
"[latex]": {
"editor.defaultFormatter": "James-Yu.latex-workshop",
"editor.formatOnSave": true
}
}Code language: JSON / JSON with Comments (json)
步驟四:下載字體
下載並安裝後,將.ttf檔複製到專案資料夾中
https://github.com/Chen11111112/Xelatex-.git
步驟五:撰寫 main.tex(中文範例)
\documentclass[12pt, a4paper]{article}
\usepackage{fontspec}
\usepackage{xeCJK}
\setCJKmainfont{AR PL KaitiM Big5}
\begin{document}
Hello World,這是我的第一個TEX!!
\end{document}Code language: JavaScript (javascript)
容器內預設有 Noto CJK 字型,直接使用即可。
步驟六:啟動 Dev Container
- 用 VSCode 開啟專案資料夾
- 按左下角
><藍色按鈕,選擇 Reopen in Container - 第一次會 build Docker image,約等 3–5 分鐘
- 完成後環境自動就緒
步驟七:編譯
開啟 main.tex,有三種方式觸發編譯:
| 方式 | 操作 |
|---|---|
| 存檔自動編譯 | Ctrl + S |
| 手動編譯 | 點右上角 ▶ 按鈕 |
| CLI 編譯 | 在 VSCode 終端機輸入 xelatex main.tex |
PDF 會在側欄自動開啟預覽。
部分資料來源: https://lucashsu95.github.io/LucasHsu.dev/devops/latex-devcontainer-guide
模板
會來跟著這篇文章操作的因該都是商智中心的w,既然要出題,當然就是以進雄大大的模板為標準:
\documentclass[12pt, a4paper]{article}
\usepackage{fontspec}
\usepackage{xeCJK}
\usepackage{amsmath}
\usepackage{amssymb}
\usepackage{fancyvrb}
\usepackage[left=2cm, right=2cm, top=2.5cm, bottom=2.5cm]{geometry}
\setCJKmainfont{AR PL KaitiM Big5}
\newcommand{\problemheader}[2]{
\begin{center}
{\Large #1} \\
{\Huge \textbf{#2}}
\end{center}
\vspace{1em}
}
\newcommand{\problemsection}[1]{
\vspace{1.5em}
{\Large \textbf{#1}}
\vspace{0.5em}
}
\DefineVerbatimEnvironment{SampleBox}{Verbatim}{
frame=single,
framesep=3mm,
fontsize=\small,
baselinestretch=1.2
}
\date{}
\begin{document}
\problemheader{Problem A}{Hello World}
\problemsection{Problem Description}
歡迎來到程式設計的世界!這是一題熱身題。
請寫一個程式,在畫面中輸出指定的字串:\texttt{Hello World}。
\problemsection{Input Format}
本題沒有任何輸入資料。
\problemsection{Output Format}
請輸出一行字串:\texttt{Hello World}。
\newline
請注意大小寫必須完全相符,且行末需換行。
\vspace{1.5em}
% --- Sample 1 ---
\noindent
\begin{minipage}[t]{0.48\textwidth}
\subsection*{Sample Input 1}
\begin{SampleBox}
\end{SampleBox}
\end{minipage}
\hfill
\begin{minipage}[t]{0.48\textwidth}
\subsection*{Sample Output 1}
\begin{SampleBox}
Hello World
\end{SampleBox}
\end{minipage}
\end{document}Code language: PHP (php) 