VScodeでMarkdownからPDF出力で数式を綺麗に表示する方法

md-pdf 勉強

パッケージのインストール

準備として
以下のパッケージ(拡張機能)をインストールします。
Markdown+Math
Markdown のプレビューで数式を表示できるようにする
Markdown PDF
Markdown を PDF で出力できるようにする

Markdownで書いた数式をPDF形式で出力できるようにする

Markdown PDFでは初期設定では、数式を出力することができません。
今回はMarkdown PDF のテンプレートファイルを書き換えて対応します。 Markdown+Math が数式の表示に KaTeX を使っているため、Markdown PDF でも KaTeX を使うようにします。
コマンドパレットで(⌘+Shift+P[Mac] もしくは Control + Shift +P[Windows])
Extensions: Open Extensions Folder
を選択すると拡張機能フォルダが自動で開かれます。

すると
yzane.markdown-pdf-1.4.4
みたいな名前のフォルダがあるはずです。
その中にtemplateというフォルダがあると思います。
templateフォルダの中のtemplate.htmlの中身を以下のように変更してあげてください。
<!DOCTYPE html>
<html>
<head>
<title>{{{title}}}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
{{{style}}}
{{{mermaid}}}
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
          ? 'dark'
          : 'default'
    });
  </script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    renderMathInElement(document.body, {
      delimiters: [
        { left: "$$", right: "$$", display: true },
        { left: "$", right: "$", display: false },
      ]
    });
  });
</script>
</head>
<body>
{{{content}}}
</body>
</html>
するとコマンドパレットから
Markdown PDF: Export(PDF)
を選択してあげましょう。
そうすれば、PDFができていると思います。

数式はLatexと同じ感じに入力することができます。
本当に便利なので、レポートなどにどんどん使いましょう。
# インラインでの数式の表示

線形回帰の式は$y = a \times x + b$とか$y = w \times x + b$で表されることが多いですね。

# 独立した数式の表示
損失関数でよく扱われる平均二乗誤差の式は

$$
Loss = \sum_{i=0}^{N} (\hat{y}_i-y_i)^2
$$

みたいな感じですよね。たぶん(笑)
いい感じにできたと思いますぅ。
以下のページを参考にしましたが、このページの通りにすると、
PDFのページが2倍に増えて出力される、
よく分からない感じになってしまい自分は困ったので😢
一応紹介しておきました。
参考:VSCodeのMarkdownで数式を表示してPDF化する

コメント

タイトルとURLをコピーしました