Pandoc(+TeX)のインストール方法
2021/6/5+
yamlヘッダー・サンプルを追加した。
2021/6/2+
settings.jsonの編集について追加した。
2021/5/28++
スクリーンショットの張り込み方について追加した。
2021/5/26+
mermaid.jsによるチャート描画について追加した。
2021/5/23p
プラグインvscode-pandoc[Pandoc Render]の設定値を追加した。
2021/5/23
docxの扱いを追加した。
2021/5/16p+
数式(MathJax)の扱いを追加した。
2021/5/16
初版
Pandoc(+TeX) Install
Pandoc(+TeX) Install
概要
Pandoc(+TeX)のインストール方法について記述する。
ホスト環境はubuntuを想定する。
インストール方法
以下の手順を実行する:
cd ~/Downloads
# pandocのインストール
wget https://github.com/jgm/pandoc/releases/download/2.13/pandoc-2.13-1-amd64.deb
sudo dpkg -i pandoc-2.13-1-amd64.deb
# TeX Liveのインストール
# (再インストールする場合、以下を実行する)
sudo rm -rf /usr/local/texlive/2021
rm -rf ~/.texlive2021
# isoイメージのダウンロード(時間がかかるので注意のこと)
wget https://ftp.kddilabs.jp/CTAN/systems/texlive/Images/texlive2021-20210325.iso
# ダウンロード後、isoイメージをマウントする
cd ~/Downloads
sudo mkdir /media/cdrom0
sudo mount -o loop ./texlive2021-2021032
cd /media/cdrom0
# インストーラーを実行する(インストールに時間がかかるので注意)
sudo ./install-tl
# メニューに従って "I" を入力する
# インストールが実行される。
# 以下のようなメッセージが表示されればインストールが完了となる
TeX Live へようこそ!
ドキュメントの一覧は /usr/local/texlive/2021/index.html をご覧ください.
TeX Live のウェブサイト (https://tug.org/texlive/) にはすべてのアップデートとコレクションの情報が掲載されています.
TeX Live は全世界の TeX ユーザ会有志による合同プロジェクトです.
TeX Live プロジェクトをサポートしていただける場合お好きな TeX ユーザ会に入会することをご検討ください.
TeX ユーザ会の一覧はhttps://tug.org/usergroups.html でご確認いただけます.
<省略>
# 以下でisoイメージをアンマウントする
cd ~
sudo umount /media/cdrom0
# 実行パスを設定する(.bashrcに登録する)
export PATH=$PATH:/usr/local/texlive/2021/bin/x86_64-linux/
# wkhtmltopdfのインストール
# (webレンダリングからPDFを作成するプログラム)
wget https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb
sudo dpkg -i wkhtmltox_0.12.6-1.focal_amd64.deb
関連スクリプト(MathJax関連)作成
以下のファイルを作成する:
mathjax0.js
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML")
document.getElementsByTagName("head")[0].appendChild(fileref)
・このファイルをカレント・デレクトリに置く。
数式の扱い(MathJax)
数式を扱う方法は色々あるが、ここでは、markdownの先頭にjavascriptのスクリプトを置く方法について紹介する。
markdownの先頭に以下のスクリプトを置くと、
数式(mathjax)が扱えるようになる。
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
equationNumbers: { autoNumber: "AMS" },
Macros: {
tcdegree: ['\\unicode{xb0}'],
tccelsius: ['\\unicode{x2103}'],
tcperthousand: ['\\unicode{x2030}'],
tcmu: ['\\unicode{x3bc}'],
tcohm: ['\\unicode{x3a9}'],
div: '{\\mathrm{div}}',
rot: '{\\mathrm{rot}}',
grad: '{\\mathrm{grad}}',
diff: '{\\mathrm{d}}',
log: '{\\mathrm{log}}',
ln: '{\\mathrm{ln}}',
b: ['{\\boldsymbol{#1}}',1],
vm: ['{\\boldsymbol{#1}}', 1],
pdiffA: ['{\\frac{\\partial #1}{\\partial #2}}', 2],
pdiffB: ['{\\frac{\\partial^{#1} #2}{\\partial #3^{#1}}}', 3],
unit: ['{\\,[\\mathrm{#1}]\\,}', 1],
}
},
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true},
"HTML-CSS": { matchFontHeight: false },
displayAlign: "left",
displayIndent: "2em"
});
</script>
<!-- 以下に数式を含むmarkdownを置く -->
コマンドライン(実行例)
テスト用のファイルを以下からダウンロードする:
・markdown_example00.md
・mycss2.css
・mathjax00.md
・reference.docx(pandoc自動生成版)
md2html(html出力)
pandoc -s --self-contained -f gfm -c mycss2.css -o out.html markdown_example00.md
# 数式(MathJax)を含むmarkdownをhtml出力する
pandoc -s --self-contained -f markdown -c mycss2.css --mathjax=mathjax0.js -o out.html mathjax00.md
・ファイルが全てカレントディレクトリにある前提
md2pdf(PDF出力)
pandoc -f gfm -c mycss2.css --pdf-engine=wkhtmltopdf -o out.pdf markdown_example00.md
pandoc --pdf-engine=lualatex -V documentclass=ltjsarticle -V indent=true -o out.pdf markdown_example00.md
pandoc --pdf-engine=lualatex -V documentclass=ltjsarticle -V luatexjapresetoption=ms -V indent=true -o out.pdf markdown_example00.md
# luatexjapresetoption=でフォントを指定できる
# 以下が選択できる
noembed: 非埋込
kozuka-pro: 小塚フォント (Pro)
kozuka-pr6: 小塚フォント (ProVI)
kozuka-pr6n: 小塚フォント (Pr6N)
hiragino-pro: ヒラギノフォント (Pro, Std)
hiragino-pron: ヒラギノフォント (ProN, StdN)
morisawa-pro: モリサワフォント (Pro)
morisawa-pr6n: モリサワフォント (Pr6N)
ipa: IPAフォント
ipaex: IPAexフォント
ms: MS 明朝,MS ゴシック
moga-mobo: MogaMincho, MogaGothic, MoboGothic(20150420.0 以降)
yu-win: Windows 8.1 に付属する游書体(20140114.0 以降)
yu-osx: OS X 10.9 に付属する游書体(20140114.0 以降)
sourcehan: 源ノ明朝,源ノ角ゴシック
・ファイルが全てカレントディレクトリにある前提
VSCodeのプラグインのインストール
pandoc,markdown関連のプラグインとして以下をインストールする:
vscode-pandoc
Markdown PDF
Markdown Pfeview Enhanced
Pandoc Markdown Preview
Paste Image
インストールしたプラグインの機能
[View/Command Plalette]の入力欄から機能名を検索して実行する:
- vscode-pandoc
- [Pandoc Render]
出力するファイルタイプのメニューが出るので、希望のファイルタイプを選択する。VSCodeの編集中のディレクトリに出力される。
- [Pandoc Render]
- Markdown PDF
- [Markdown PDF: Export(html)]
vscodeの編集中の.mdのあるディレクトリにhtmlファイルを出力する。 - [Markdown PDF: Export(PDF)]
vscodeの編集中の.mdのあるディレクトリにhtmlファイルを出力する。
- [Markdown PDF: Export(html)]
- Markdown Preview Enhanced
- [Markdown Markdown Preview Enhanced: Open Preview to the side]
プレビュー画面で右クリックするとメニューが出現するので以下の機能を選択する:- Pandoc
編集中の.mdのyamlヘッダーの情報に応じてファイル出力する。 - eBook/ePub
電子ブック用のePubフォーマットでファイル出力される。 - eBook/mobi
kindle用のmobiフォーマットでファイル出力される。
- Pandoc
- [Markdown Markdown Preview Enhanced: Open Preview to the side]
- Pandoc Markdown Preview
- [Open Pandoc Markdown Preview]
Pandoc仕様のMarkdown仕様でプリビューされる。
- [Open Pandoc Markdown Preview]
- Paste Image
[Ctrl]+[Alt]+[V]でmarkdownテキストにペーストバッファにある画像が張り込めるようになる。
プラグインではないが内蔵の[Markdown: Open Preview to the Side] は、(だいたい?)Github-Flavor-Markdown仕様のプレビューとして動作するようだ。
yamlヘッダー
編集中の.mdの先頭に以下を置くとpandoc使用時に、その情報を参照できる。
---
title: "文書名"
author: 作者
date: 日付
output:
word_document:
path: out.docx
toc: true
pandoc_args: ["--reference-doc=ref00.docx"]
---
プラグイン[Markdown Markdown Preview Enhanced: Open Preview to the side]のPandocを選択すると上のヘッダーに応じてpandocがファイルを出力するので、この場合、出力ファイルは、out.docxで、pandocに与える引数は 「"--reference-doc=ref00.docx"]」になる。
reference-doc作成
以下の手順でreference-docの雛形を作成できる:
cd ~
mkdir .pandoc
cd .pandoc
pandoc --print-default-data-file reference.docx > reference.docx
このまま利用することも可能だがMS-WORDまたはLibreOffice-Writterで編集してカスタマイズすることも可能である。カスタマイズする点としては、ヘッダー/フッターの追加、章番号付け、表紙などの文字やスタイル変更などが考えられる。
環境(window10環境?)によってreference.docxが壊れている場合がある。(Writer/WORDなどで開くとデータが壊れている)
この場合、以下から既にカスタマイズしたものをダウンロードする:
wget https://github.com/mottox2/pandoc-word-starter/blob/master/custom-reference.docx
コメントや履歴が残っていると変換が失敗することあるので、一度、Writer/WORDで履歴の解消、コメントの削除を行なう。
ここでは、カスタマイズしたものを、ref00.docxとして編集中のディレクトリに置くこととする。
これにより上のプラグインでの出力結果であるout.docxはカスタマイズしたreference-docに従ったスタイルの文書になる。
なお、章番号の追加は以下のものを参照のこと:
・Writerで見出しに段落番号を設定する
操作はMS-WORDよりも簡単なので通常MS-WORDを使っていたとしてもwriterを使ってカスタマイズしても良いかもしれない。
目次の作成
out.docxには既に目次はあるので以下の手順で目次を更新する必要がある。
- 目次を右クリックして、目次と索引の更新 を選択する。
- [メニュー ツール/更新 /すべての目次と索引]を選択する。
プラグイン[Pandoc Render]の設定
プラグインvscode-pandoc[Pandoc Render]の設定は以下を設定する:
(「:」の右側の文字列を「"」無しで入力する)
"pandoc.asciidocOptString": "-f gfm -c /home/USER/.pandoc/github.css "
"pandoc.docbookOptString": "-f gfm -c /home/USER/.pandoc/github.css "
"pandoc.docxOptString": "--standalone -f gfm -t docx --reference-doc=/home/USER/.pandoc/ref00.docx --toc "
"pandoc.epubOptString": "-f gfm -c /home/USER/.pandoc/github.css "
#数式無しの場合
"pandoc.htmlOptString": " -s --self-contained -f gfm -c /home/USER/.pandoc/github.css -t html5 "
#数式付きの場合
"pandoc.htmlOptString": " -s --self-contained -f markdown -c /home/USER/.pandoc/github.css --mathjax=/home/USER/.pandoc/mathjax0.js -t html5 "
#PDF出力にwkhtmltopdfを利用する場合
"pandoc.pdfOptString": "-f gfm -c /home/USER/.pandoc/github.css --pdf-engine=wkhtmltopdf "
#PDF出力にlualatexを利用する場合
#luatexjapresetoptions= には以下のフォントを指定する;
# morisawa,ipa,ipaex,hiragino,kozuka,moga,yu,source
"pandoc.pdfOptString": " --pdf-engine=lualatex -V documentclass=ltjsarticle -V luatexjapresetoptions=morisawa "
"pandoc.rstOptString": "-f gfm -c /home/USER/.pandoc/github.css "
・ref00.docx, mathjax0.js, github.css(=mycss2.css)は「~/.pandoc」のディレクトリに置くこと。
・USERは環境依存なので自分の環境に合わせること。
mermaid.jsでのチャート表示
プラグイン[Markdown Preview Enhanced: Open Review ...]にはmermaid.jsが内蔵されいるので、以下のようなコードブロックでチャートが表示できる。
注意:
・PDF化、HTML化、PNG化を動かすにはchromeインストールが前提になる。
・初期化に問題があるせいか、PNG化を最初に動かす必要にある。
```mermaid
graph TB
a -->
b & c -->
d -->
e -->
f -->
d
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
実際のチャートの表示を見たい場合、以下をクリックする:
・mermaid_exaples
スクリーンショットを張り込む(ubuntuの場合)
- スクリーンショット
[Ctrl]+[Shift]+[PrintScreen]を押すと画面の範囲指定ができるようになるので 画面の希望の範囲を指定するとスクリーンショット画像がペーストバッファに保存される。 - ペースト
その後、VSCodeのmarkdownの編集画面で画像を張り込みたい場所にカーソルを移動して[Ctrl]+[Alt]+[V]を押すと画像が張り込まれる。
その際、以下のようなmarkdownテキストで張り込まれる。

(デフォルトの設定では)カレント・ディレクトリに画像ファイルが置かれる。
スクリーンショットを張り込む(windows10の場合)
- スクリーンショット
[Windows]+[Shift]+[S]を押すと画面の範囲指定ができるようになるので 画面の希望の範囲を指定するとスクリーンショット画像がペーストバッファに保存される。 - ペースト
その後、VSCodeのmarkdownの編集画面で画像を張り込みたい場所にカーソルを移動して[Ctrl]+[Alt]+[V]を押すと画像が張り込まれる。
以下、ubuntuと同様
プラグイン「Paste Image」の設定(ubuntu/windows10共通)
デフォルトの設定のままだとカレント・ディレクトリに.pngが増えて、うるさくなるので、PNGディレクトリのなかに.pngを置くように設定を以下のように変更する:
"pasteImage.path": "PNG"
"pasteImage.prefix": "./"
settings.json
プラグイン設定をまとめて設定する場合は、以下のsettings.jsonを編集する:
Windows %APPDATA%\Code\User\settings.json
#実際のファイルのロケーションは以下になる:
C:\Users\USER\AppData\Roaming\Code\User\settings.json
#USERは実際のユーザー名になる
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
#実際のファイルのロケーションは以下になる:
~/.config/Code/User/Settings.json
実際には以下のように編集する:
ubuntuの場合
~/.config/Code/User/Settings.json
{
<既にある設定値>
"pandoc.htmlOptString": " -s --self-contained -f markdown -c /home/USER/.pandoc/github.css --mathjax=/home/USER/.pandoc/mathjax0.js -t html5 ",
"pandoc.docxOptString": "--standalone -f gfm -t docx --reference-doc=/home/USER/.pandoc/ref00.docx --toc ",
"pandoc.epubOptString": "-f gfm -c /home/USER/.pandoc/github.css ",
"pandoc.asciidocOptString": "-f gfm -c /home/USER/.pandoc/github.css ",
"pandoc.docbookOptString": "-f gfm -c /home/USER/.pandoc/github.css ",
"pandoc.rstOptString": "-f gfm -c /home/USER/.pandoc/github.css ",
"pandoc.pdfOptString": " --pdf-engine=lualatex -V documentclass=ltjsarticle -V luatexjapresetoptions=morisawa ",
"pasteImage.path": "PNG",
"pasteImage.prefix": "./",
//LaTeX
"latex-workshop.latex.recipes": [
{
"name": "lualatex",
"tools": [
"lualatex",
]
},
{
"name": "lualatex twice compile",
"tools": [
"lualatex",
"lualatex",
]
},
],
"latex-workshop.latex.tools": [
{
"name": "lualatex",
"command": "lualatex",
"args": [
"--cmdx",
"-file-line-error",
"-synctex=1",
"-interaction=nonstopmode",
"-halt-on-error",
"%DOC%",
],
},
],
"latex-workshop.latex.autoClean.run": "onBuilt",
"latex-workshop.latex.autoBuild.run": "onFileChange",
"latex-workshop.latex.autoBuild.interval": 0,
"latex-workshop.view.pdf.viewer": "tab",
}
・「USER」は、環境依存のユーザー名となる。
windows10の場合
C:\Users\USER\AppData\Roaming\Code\User\settings.json
{
<既にある設定値>
"pandoc.docxOptString": "--standalone -f gfm -t docx --reference-doc=C:\\Users\\USER\\.pandoc\\ref00.docx --toc ",
"pandoc.asciidocOptString": "-f gfm -c C:\\Users\\USER\\.pandoc\\github.css ",
"pandoc.docbookOptString": "-f gfm -c C:\\Users\\USER\\.pandoc\\github.css ",
"pandoc.epubOptString": "-f gfm -c C:\\Users\\USER\\.pandoc\\github.css ",
"pandoc.rstOptString": "-f gfm -c C:\\Users\\USER\\.pandoc\\github.css ",
"pandoc.pdfOptString": "-f gfm -c C:\\Users\\USER\\.pandoc\\github.css --pdf-engine=wkhtmltopdf ",
"pandoc.htmlOptString": "-f gfm -c C:\\Users\\USER\\.pandoc\\github.css ",
"pasteImage.path": "PNG",
"pasteImage.prefix": "./",
//LaTeX
"latex-workshop.latex.recipes": [
{
"name": "lualatex",
"tools": [
"lualatex",
]
},
{
"name": "lualatex twice compile",
"tools": [
"lualatex",
"lualatex",
]
},
],
"latex-workshop.latex.tools": [
{
"name": "lualatex",
"command": "lualatex",
"args": [
"--cmdx",
"-file-line-error",
"-synctex=1",
"-interaction=nonstopmode",
"-halt-on-error",
"%DOC%",
],
},
],
"latex-workshop.latex.autoClean.run": "onBuilt",
"latex-workshop.latex.autoBuild.run": "onFileChange",
"latex-workshop.latex.autoBuild.interval": 0,
"latex-workshop.view.pdf.viewer": "tab",
}
・「\」は、エスケープ文字付きに「\\」となる。
・「USER」は、環境依存のユーザー名となる。
注意:プラグインの実行パス(windows10限定)
たぶん、セキュリティの考慮のため外部で設定した実行パスはプラグインで実行する環境には継承されないようだ。したがってPowerScriptのスクリプトで実行パスを設定しても無効になる。
また、VSCodeのなかのTerminalで実行パスを設定すると、そのTerminalの環境としては有効になるが、プラグインには継承されない。
したがって、プラグインでも有効になる実行パス設定としては、システム設定を利用する。操作については以下を参照のこと。
実行パスが有効になったことの確認は以下のようなコマンドをPowerShellで実行する:
gcm wkhtmltopdf
CommandType Name Version Source
----------- ---- ------- ------
Application wkhtmltopdf.exe 0.12.6.0 C:\Program Files\wkhtmltopdf\bin\wkhtm...
yamlヘッダー・サンプル
yamlヘッダーを差し替えると出力形式を切り替えられるが、実際に動作確認したものを以下に挙げる:
なお、操作としては以下になる: [Markdown Markdown Preview Enhanced: Open Preview to the side]のプレビュー画面で右クリックして、[Pandoc]を選択する。
PDF出力用(目次付き)#1:
---
title: "タイトル"
author: "作者"
date: "日付"
output:
pdf_document:
path: out.pdf
latex_engine: lualatex
pandoc_args: [
"--toc",
"--toc-depth=2",
]
documentclass: ltjsarticle
classoption: luatexjapresetoption=morisawa,a4paper,14pt
---
PDF出力用(目次付き)#2:
---
title: "タイトル"
author: "作者"
date: "日付"
output:
pdf_document:
path: out.pdf
latex_engine: lualatex
pandoc_args: [
"--toc",
"--toc-depth=2"
]
documentclass: ltjltxdoc
classoption: a4paper,12pt
---
PDF出力用:
---
title: "タイトル"
author: "作者"
date: "日付"
output:
pdf_document:
path: out.pdf
latex_engine: lualatex
documentclass: bxjsarticle
classoption: pandoc,jafont=morisawa,a4paper
---
docx出力用:
---
title: "タイトル"
author: "作者"
date: "日付"
output:
word_document:
path: out.docx
toc: true
pandoc_args: ["--reference-doc=ref03.docx"]
---
・「ref03.docx」は、カレント・ディレクトリに置くこと。
参考情報
Pandoc User’s Guide 日本語版
LuaTeX-ja の使い方
TeX WiKi - LuaTeX-ja
VScode+pandoc+Lualatexで日本語pdfをMarkdownから出力する
rmarkdownのYAMLヘッダ
MathJax | Beautiful math in all browsers.
WiKi - MathJax
数式・画像付きのmarkdownをhtmlに変換
Markdown記法 サンプル集
メモ: Pandoc+LaTeXで気軽に日本語PDFを出力する
Pandocを使ったWord組版のはじめ方
Mermaid.jsでグラフを簡単に描く方法
Mermaid lets you create diagrams and visualizations using text and code.
mermaid-cli
Markdownでスクショ画像をペーストする(VS Code)
ubuntu関連:
How to printscreen direct to clipboard
Ubuntu, Linux Mintでスクリーンショットを撮る
windows10関連:
スクショがより手軽に!「Snipping Tool」アプリに代わる新しいスクリーンショット機能
Windows10で実行ファイルへのパスを通す手順
Equivalent of *Nix 'which' command in PowerShell?
以上