55
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

VSCode の Markdown で数式を表示して PDF 化する

インストール

以下の拡張機能をインストールします。

  • Markdown+Math
    Markdown のプレビューで数式を表示できるようにする
  • Markdown PDF
    Markdown を PDF で出力できるようにする

数式をPDFで出力できるようにする

Markdown PDF では数式を出力することができません。
今回は Markdown PDF のテンプレートファイルを書き換えて対応しました。

Markdown+Math が数式の表示に KaTeX を使っているため、Markdown PDF でも KaTeX を使うようにします。
コマンドパレットで > Extensions: Open Extensions Folder すると拡張機能フォルダを開くことができます。

markdown-pdf-x.x.x/template/template.html
<!DOCTYPE html>
<html>
<head>
<title>{{{title}}}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
{{{style}}}
<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>

PDF に変換する

あとは普通に > Markdown PDF: Export するだけで、数式も含んだ PDF に変換することができます。
一度 html を経由するので、png や jpeg でエクスポートしても数式が変換されます。

最後に

テンプレートファイルを書き換えるのがちょっと無理矢理感があります。
もっといい方法があればぜひ教えてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
55
Help us understand the problem. What are the problem?