背景

最近在公司用Markdown写技术博客时,需要插入伪代码块,而Markdown里没有找到比较美观的实现方案,想到之前在学校写论文时一直用LaTex,里面的伪代码非常漂亮,所以就想在Markdown里混合使用LaTex,下面是从网上找到的解决方案汇总,方便自己以后查阅。

安装Tex环境

  • 从以下网址下载Tex环境后安装,这个是MacOS下的Tex,Windows系统的是别的。
    http://www.tug.org/mactex/mactex-download.html

VSCode配置

  • 安装LaTeX Workshop插件
  • settings.json增加以下配置
    "latex-workshop.latex.recipes": [
    {
    "name": "xelatex",
    "tools": [
    "xelatex"
    ]
    },
    {
    "name": "latexmk",
    "tools": [
    "latexmk"
    ]
    },
    {
    "name": "pdflatex -> bibtex -> pdflatex*2",
    "tools": [
    "pdflatex",
    "bibtex",
    "pdflatex",
    "pdflatex"
    ]
    }
    ],
    "latex-workshop.latex.tools": [
    {
    "name": "latexmk",
    "command": "latexmk",
    "args": [
    "-synctex=1",
    "-interaction=nonstopmode",
    "-file-line-error",
    "-pdf",
    "%DOC%"
    ]
    },
    {
    "name": "xelatex",
    "command": "xelatex",
    "args": [
    "-synctex=1",
    "-interaction=nonstopmode",
    "-file-line-error",
    "%DOC%"
    ]
    },
    {
    "name": "pdflatex",
    "command": "pdflatex",
    "args": [
    "-synctex=1",
    "-interaction=nonstopmode",
    "-file-line-error",
    "%DOC%"
    ]
    },
    {
    "name": "bibtex",
    "command": "bibtex",
    "args": [
    "%DOCFILE%"
    ]
    }
    ],
    "latex-workshop.view.pdf.viewer": "tab",
    "latex-workshop.latex.clean.fileTypes": [
    "*.aux",
    "*.bbl",
    "*.blg",
    "*.idx",
    "*.ind",
    "*.lof",
    "*.lot",
    "*.out",
    "*.toc",
    "*.acn",
    "*.acr",
    "*.alg",
    "*.glg",
    "*.glo",
    "*.gls",
    "*.ist",
    "*.fls",
    "*.log",
    "*.fdb_latexmk"
    ],

中文字体支持

完成上面工作后,就可以在VSCode下编辑和预览Tex文件了。不过中文支持不好,需要按下面操作兼容中文字体。 * 打开~/.pandoc/templates/default.latex文件,把以下内容填进去。

\documentclass[$if(fontsize)$$fontsize$,$endif$$if(lang)$$lang$,$endif$$if(papersize)$$papersize$,$endif$]{$documentclass$}
\usepackage{geometry} % 設定邊界
\geometry{
top=1in,
inner=1in,
outer=1in,
bottom=1in,
headheight=3ex,
headsep=2ex
}
\usepackage[T1]{fontenc}
\usepackage{lmodern}
\usepackage{amssymb,amsmath}
\usepackage{ifxetex,ifluatex}
\usepackage{fixltx2e} % provides \textsubscript
% use upquote if available, for straight quotes in verbatim environments
\IfFileExists{upquote.sty}{\usepackage{upquote}}{}
\ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
\usepackage[utf8]{inputenc}
$if(euro)$
\usepackage{eurosym}
$endif$
\else % if luatex or xelatex
\usepackage{fontspec} % 允許設定字體
\usepackage{xeCJK} % 分開設置中英文字型
\setCJKmainfont{STSong} % 設定中文字型
\setmainfont{Georgia} % 設定英文字型
\setromanfont{Georgia} % 字型
\setmonofont{Courier New}
\linespread{1.2}\selectfont % 行距
\XeTeXlinebreaklocale "zh" % 針對中文自動換行
\XeTeXlinebreakskip = 0pt plus 1pt % 字與字之間加入0pt至1pt的間距,確保左右對整齊
\parindent 0em % 段落縮進
\setlength{\parskip}{20pt} % 段落之間的距離
\ifxetex
\usepackage{xltxtra,xunicode}
\fi
\defaultfontfeatures{Mapping=tex-text,Scale=MatchLowercase}
\newcommand{\euro}{€}
$if(mainfont)$
\setmainfont{$mainfont$}
$endif$
$if(sansfont)$
\setsansfont{$sansfont$}
$endif$
$if(monofont)$
\setmonofont{$monofont$}
$endif$
$if(mathfont)$
\setmathfont{$mathfont$}
$endif$
\fi
% use microtype if available
\IfFileExists{microtype.sty}{\usepackage{microtype}}{}
$if(geometry)$
\usepackage[$for(geometry)$$geometry$$sep$,$endfor$]{geometry}
$endif$
$if(natbib)$
\usepackage{natbib}
\bibliographystyle{plainnat}
$endif$
$if(biblatex)$
\usepackage{biblatex}
$if(biblio-files)$
\bibliography{$biblio-files$}
$endif$
$endif$
$if(listings)$
\usepackage{listings}
$endif$
$if(lhs)$
\lstnewenvironment{code}{\lstset{language=Haskell,basicstyle=\small\ttfamily}}{}
$endif$
$if(highlighting-macros)$
$highlighting-macros$
$endif$
$if(verbatim-in-note)$
\usepackage{fancyvrb}
$endif$
$if(tables)$
\usepackage{longtable}
$endif$
$if(graphics)$
\usepackage{graphicx}
% We will generate all images so they have a width \maxwidth. This means
% that they will get their normal width if they fit onto the page, but
% are scaled down if they would overflow the margins.
\makeatletter
\def\maxwidth{\ifdim\Gin@nat@width>\linewidth\linewidth
\else\Gin@nat@width\fi}
\makeatother
\let\Oldincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\Oldincludegraphics[width=\maxwidth]{#1}}
$endif$
\ifxetex
\usepackage[setpagesize=false, % page size defined by xetex
unicode=false, % unicode breaks when used with xetex
xetex]{hyperref}
\else
\usepackage[unicode=true]{hyperref}
\fi
\hypersetup{breaklinks=true,
bookmarks=true,
pdfauthor={$author-meta$},
pdftitle={$title-meta$},
colorlinks=true,
urlcolor=$if(urlcolor)$$urlcolor$$else$blue$endif$,
linkcolor=$if(linkcolor)$$linkcolor$$else$magenta$endif$,
pdfborder={0 0 0}}
\urlstyle{same} % don't use monospace font for urls
$if(links-as-notes)$
% Make links footnotes instead of hotlinks:
\renewcommand{\href}[2]{#2\footnote{\url{#1}}}
$endif$
$if(strikeout)$
\usepackage[normalem]{ulem}
% avoid problems with \sout in headers with hyperref:
\pdfstringdefDisableCommands{\renewcommand{\sout}{}}
$endif$
\setlength{\parindent}{0pt}
%\setlength{\parskip}{6pt plus 2pt minus 1pt}
\setlength{\emergencystretch}{3em} % prevent overfull lines

\title{\huge 在OSX平台上的XeLaTeX中文測試} % 設置標題,使用巨大字體
\author{FoolEgg.com} % 設置作者
\date{February 2013} % 設置日期
\usepackage{titling}
\setlength{\droptitle}{-8em} % 將標題移動至頁面的上面

\usepackage{fancyhdr}
\usepackage{lastpage}
\pagestyle{fancyplain}

$if(numbersections)$
\setcounter{secnumdepth}{5}
$else$
\setcounter{secnumdepth}{0}
$endif$
$if(verbatim-in-note)$
\VerbatimFootnotes % allows verbatim text in footnotes
$endif$
$if(lang)$
\ifxetex
\usepackage{polyglossia}
\setmainlanguage{$mainlang$}
\else
\usepackage[$lang$]{babel}
\fi
$endif$
$for(header-includes)$
$header-includes$
$endfor$

$if(title)$
\title{$title$}
$endif$
\author{$for(author)$$author$$sep$ \and $endfor$}
\date{$date$}

\begin{document}
$if(title)$
\maketitle
$endif$

$for(include-before)$
$include-before$

$endfor$
$if(toc)$
{
\hypersetup{linkcolor=black}
\setcounter{tocdepth}{$toc-depth$}
\tableofcontents
}
$endif$
$body$

$if(natbib)$
$if(biblio-files)$
$if(biblio-title)$
$if(book-class)$
\renewcommand\bibname{$biblio-title$}
$else$
\renewcommand\refname{$biblio-title$}
$endif$
$endif$
\bibliography{$biblio-files$}

$endif$
$endif$
$if(biblatex)$
\printbibliography$if(biblio-title)$[title=$biblio-title$]$endif$

$endif$
$for(include-after)$
$include-after$

$endfor$
\end{document}

Markdown里使用LaTex

Markdown文件里可以插入LaTex片段,可以通过Pacdoc将md文件转成pdf或其他文件。

  • 新建一个md文件test.md,填入以下内容

    ## 背景
    MacOS LaTex环境配置

    ## 嵌入latex算法伪代码

    ---
    header-includes:
    - \usepackage[ruled,vlined,linesnumbered]{algorithm2e}
    ---
    # Algorithm 1
    Just a sample algorithmn
    \begin{algorithm}[H]
    \DontPrintSemicolon
    \SetAlgoLined
    \KwResult{Write here the result}
    \SetKwInOut{Input}{Input}\SetKwInOut{Output}{Output}
    \Input{Write here the input}
    \Output{Write here the output}
    \BlankLine
    \While{While condition}{
    instructions\;
    \eIf{condition}{
    instructions1\;
    instructions2\;
    }{
    instructions3\;
    }
    }
    \caption{While loop with If/Else condition}
    \end{algorithm}

  • md生成pdf

    pandoc --pdf-engine=xelatex test.md -o test.pdf
    或者
    pandoc --pdf-engine=xelatex --template=[template.latex的路径] test.md -o test.pdf
    不配置--template时默认使用~/.pandoc/templates/default.latex

总结

在VSCode里,如果Markdown文件里有LaTex片段的话,是无法完全预览的,所以只能用Pandoc转成pdf来看效果,如果你有更好的办法欢迎提供。