2015年5月15日金曜日

PandocとLuaLaTeXを使ったPDF出力でコードブロックをきれいに表示する

ドキュメント変換ツール Pandoc の LaTeX を使った PDF 出力。

この投稿では前回の HTML 変換に引き続いて、Pandoc を使って Markdown テキストを PDF へ変換する方法を書いています。

使用環境:Windows7 64bit, pandoc 1.13.2, TeXLive 2014



LuaLaTeX

Pandoc の PDF 出力の場合、標準では pdfLaTeX が使われます。本家の Web サイトでは pdfLaTeX をサポートした MiKTeX を薦めていますが、日本語テキストを扱う場合は LuaLaTeX がお薦めです。この LuaLaTeX では日本語組版に対応した LuaTeX-ja パッケージがサポートされています。

Windows 環境への LuaLaTeX のインストールは TeX Live を使います。専用のインストーラが用意されているので簡単にインストールできます。


TeX Liveとは

TeX Live は TeX のディストリビューションのひとつで TeX 環境がこのディストリビューションパッケージにまとめられています。現在では日本語組版に必要な要素のほとんどすべてがまるっと取り込まれているので、TeX Live をインストールするだけで日本語文書を扱うことができます。


TeX Live 2014をインストール

今回は TeX Live 2014 インストール用 DVD を作成してインストールしました。 出来上がった DVD の中の install-tl-windows.bat を実行するとインストールを開始できます。インストールに要した時間は DVD インストールでは約 1 時間でした。また別件で DVD の内容全てを HDD 上にコピー後(ISO ファイルがマウントできるならコピー不要)インストールした場合では約 30 分でした。HDD 上でインストール作業が可能な場合は後者がお勧めです。

TeX Live の最新版 TeX Live 2014 の ISO イメージファイル

TeX Live をインストールすると TeX の総合環境 TeXworks が付いてきます。LaTeX ファイルの動作確認など便利に使えます。

参考: インストール後の TeXworks の日本語環境の設定等が分かりやすく書かれています。



PDF出力を試してみる

はじめに Markdown テキストを PDF ファイルに変換してみましょう。

  1. コマンドプロンプトからpandoc -o hello.pdfを入力
  2. #Hello Pandocを入力
  3. Crtl + Zキーを押してEOFを入力
>pandoc -o hello.pdf
#Hello Pandoc
^Z

問題が無ければカレントフォルダにhello.pdfが出力されているはずです。

このように TeX Live を使えば Pandoc から簡単に PDF 出力できるようになります。



日本語を含んだMarkdownファイルをPDFに変換する場合

日本語文章を PDF 出力する場合は、日本語に対応したLaTeX エンジンとドキュメントクラスを Pandoc に指定して変換します。

たとえば LaTeXエンジンに LuaLaTeX を指定、ドキュメントクラスに ltjarticle を指定する場合は、コマンドにこのオプションを追加します。

--latex-engine=lualatex -V documentclass=ltjarticle

Pandoc のデフォルトエンコーディングは UTF-8 になっています。そのため、コマンドプロンプトから入力した日本語テキストを標準入力から Pandoc に入力すると、内部エンコードの違いでうまくいきません。ここでは入力用の Markdown ファイルを作成して試すことにします。

はじめに任意の Markdown テキストを記述したファイルを作成して UTF-8 でファイルを保存します。 この例ではファイル名input.mdで保存します。

input.md
#こんにちはPandoc

次のコマンドを実行して PDF へ変換します。

pandoc -f markdown input.md -s -o output.pdf ^
--latex-engine=lualatex ^
-V documentclass=ltjarticle

カレントフォルダにoutput.pdfが出力されているはずです。

この例で Pandoc は、入力されたファイルを LaTeX 形式に変換後 LuaLaTeX を経由して PDF を出力しています。このとき-sオプションによって LaTeX 用のテンプレートが適用されています。

ここで、入力した Markdown 形式の内容が、どのように LaTeX 形式に変換されたのかを知るには、出力ファイルを LaTeX 形式に指定することで確認できます。

pandoc -f markdown input.md -s -o output.tex ^
--latex-engine=lualatex ^
-V documentclass=ltjarticle

出力されたファイルoutput.texを TeXworks で開き、LuaLaTeX でタイプセットすると PDF 出力と同じ内容のプレビューを TeXworks で確認することができます。

用紙サイズやマージンの指定は-V geometry:を使うと便利です。

A4用紙に設定する

-V geometry:a4paper

マージンを1cmに設定する

-V geometry:margin=1cm


文書クラス(ドキュメントクラス)

文書クラスは LaTeX の文章の体裁や論理構造を決める情報ファイルです。LaTeX でよく使われる文書クラスは article, book, report などがあります。 (ファイルの拡張子は .cls )

日本語に対応した標準的な文書クラスはjsclassesです。接頭辞のjsは(Japanese Standard)の意味を含んでいるそうです。このファイルは新しい標準的な文書クラスとして 2000 年に公開されました。

  • jsarticle.cls (標準的な横書き論文・レポート)
  • jsbook.cls (標準的な横書き書籍)


LuaLaTeX用の文書クラス

LuaLaTeX で使用する文書クラスは jsclasses を LuaTeX-ja 用に調整されたものがあります。 LuaLaTeX では接頭辞にltが付いた文書クラスltjsclassesなどを使用します。

インストールフォルダを調べると下記のクラスファイルが見つかりました。Pandoc での動作確認結果と合わせて一覧に示します。

デフォルトインストールではこのフォルダに入っています。
C:\texlive\2014\texmf-dist\tex\luatex\luatexja

クラスファイル名 Pandocで使用の可否
ltjarticle.cls OK
ltjreport.cls OK
ltjbook.cls OK
ltjltxdoc.cls OK
ltjsarticle.cls OK (ただし要パッチ)
ltjsbook.cls NG (エラー発生)
ltjskiyou.cls NG (エラー発生)
ltjspf.cls NG (エラー発生)

LuaLaTeX で ltjsarticle を指定するとエラーが発生しましたが、この情報を参考にパッチを当てると使えるようになりました。



PDFのコードブロックをきれいに表示する。

実際に Markdown を PDF 変換してみると分かるのですが、Pandoc で出力したコードブロックはシンプルすぎて本文とコードブロックの違いが分かり難かったり、コードブロックの行の折り返しが行われず行が長くなると右側にはみ出た部分が途切れてしまい良くありません。

この場合 Pandoc の--listingsオプションを使うと、コードブロックの表示を良い感じに設定できます。



Pandoc: --listingsオプション

--listingsオプションの有無の違いをコマンドラインで確認してみましょう。

Pandoc 標準のコードブロック

>pandoc -t latex
```
puts "Hello Pandoc"
```
^Z
\begin{verbatim}
puts "Hello Pandoc"
\end{verbatim}

標準の PDF 出力のコードブロックは LaTeX の verbatim 環境に変換されるようです。これは入力どおりの内容をそのまま出力するもので、改行以外の文字で折り返すことなくそのまま表示されます。

つぎは、Pandoc --listingsオプション付きのコードブロック

>pandoc -t latex --listings
```
puts "Hello Pandoc"
```
^Z
\begin{lstlisting}
puts "Hello Pandoc"
\end{lstlisting}

このように、--listingsオプションを付けるとコードブロックが verbatim 環境から lstlisting 環境に変わります。この例では文字が入れ替わっただけの違いしか有りませんが、lstlisting 環境では行の折り返しは勿論のこと、シンタックスハイライトや行番号表示などが可能になります。

lstlisting 環境の設定はコマンドラインで指定すると冗長になるので、あらかじめ別ファイルlistings-setup.texに設定を書いておきます。

コードの先頭 4 行は lstlisting 環境の設定とは関係ありません。ここではフォント埋め込みや用紙サイズ、数式のためのパッケージの設定等を合わせて設定しています。

listings-setup.tex

コードブロックに listings 設定ファイルを適用するには、-H xxx.texオプションで指定します。その場合次のコマンドを実行します。

pandoc -f markdown input.md ^
-V documentclass=ltjsarticle ^
--latex-engine=lualatex ^
--listings -H listings-setup.tex ^
-o output.pdf

GFM の場合

pandoc -f markdown_github+fenced_code_attributes ^
input.md ^
-V documentclass=ltjsarticle ^
--latex-engine=lualatex ^
--listings -H listings-setup.tex ^
-o output.pdf


コードブロックの書き方



LaTeX の lstlisting 属性の記述方法も可能のようです。

この例ではコードブロックの左に行番号を表示、開始番号を 10 に指定、コードブロックのキャプションを設定しています。

```{language=Ruby numbers=left startFrom=10 caption="\{This is caption of code block\}"}
require 'sinatra'
#こんにちはPandoc

get '/' do
  'Hello Pandoc!'
end
```

PDF 出力の結果



Pandoc の属性記述方法の場合

この例では言語をRuby、行番号を表示、開始番号を 1 に指定しています。

```{ .ruby .numberLines startFrom="1"}
require 'sinatra'
#こんにちはPandoc

get '/' do
  'Hello Pandoc!'
end
```

PDF 出力の結果



Pandoc の属性記述方法(言語名のみ)

```ruby
require 'sinatra'
#こんにちはPandoc

get '/' do
  'Hello Pandoc!'
end
```

PDF 出力の結果



LaTeXコマンドを使う

Markdown の PDF 化では、HTML 出力したファイルをブラウザの PDF プリンタを経由して PDF ファイルに保存することができますが、改ページの位置を PDF プリンタに委ねなければなりません。Pandoc を使って Markdown から PDF を出力する場合は、テキスト内に LaTeX コマンドを記述して改ページをコントロールすることができます。あわせて、拡張書式tex_math_dollarsを有効にしておくと、数式にインライン数式の$...$が使えるので便利です。

Markdown テキストの中に LaTeX コマンドを記述する場合、記述方法で注意することがあります。 というのも、HTML 出力で MathJax を使う場合では数式と LaTeX コマンドの両方を$...$の中に記述できます。いっぽうで、PDF 出力の場合では LaTeX を経由するため$...$は数式モードを表します。そのため数式モードで使えないコマンドを$...$の中に記述するとエラーになる場合があります。

LaTeX コマンドを使って改ページする場合は、テキスト内の改ページしたい位置にnewpageコマンドをそのまま記述します。

\newpage

コマンドラインでは、拡張書式raw_textex_math_dollarsを追加して実行します。 GFM の場合このようなコマンドになります

pandoc -f markdown_github-hard_line_breaks^
+raw_tex+tex_math_dollars^
+fenced_code_attributes ^
input.md ^
-V documentclass=ltjsarticle ^
--latex-engine=lualatex ^
--listings -H listings-setup.tex ^
-o output.pdf


まとめ

Markdown テキストから簡単に PDF 出力できる Pandoc の便利さを改めて感じました。また、これまでは MathJax の数式でしか LaTeX 環境に触れたことが無かったのですが、今回の TeX Live のインストールを期に、ほんの少しですが LaTeX の世界について知ることができました。もっと LaTeX コマンドを使いこなせるようになれば活用方法が広がりそうです。

参考:

Pandocの紹介記事

TeX Liveの解説

Pandocの--listingsオプション設定ファイルの使い方

lstlisting 環境の詳細は The Listings Package listings.pdf に書かれています。

Pandoc には他にも多くの機能があります、興味を持った方はユーザーズガイドを読んでみてください。

本家ユーザーズガイド

日本語ユーザーズガイド

2015年5月9日土曜日

PandocのHTML出力でGFMとカスタムテンプレートを使う

PandocでMarkdownをHTMLへ変換

ドキュメント変換ツール Pandoc は様々な入出力形式に対応したコマンドラインツールです。多くの派生版 Markdown への対応や Pandoc による拡張 Markdown などの機能があり、柔軟な Markdown 変換ツールとして興味深いツールです。また、LaTeX を使った PDF 出力機能もそのひとつです。

この投稿では Pandoc を使って Markdown テキストを HTML へ変換する方法を簡単に紹介しています。

使用環境:Windows7 64bit, pandoc 1.13.2, Firefox 37.0.2



Pandocをインストール

Windows 用をダウンロード

最新版 pandoc-1.13.2-windows.msi をインストール。



Pandocを使ってみる

インストールが完了したら手始めに Pandoc の動作確認を兼ねて、Markdown テキストを HTML に変換してみましょう。ここではファイルを使わずに標準入出力を使って試します。

  1. コマンドプロンプトでpandocと入力
  2. #Hello Pandocを入力
  3. Crtl + Zキーを押して EOF を入力
  4. HTML に変換された結果が画面に表示されます。

      >pandoc
      #Hello Pandoc
      ^Z
      <h1 id="hello-pandoc">Hello Pandoc</h1>
      

このように入出力ファイルを指定しない場合 Pandoc は入力に標準入力を、出力に標準出力を使用します。また、入出力フォーマットを明示しない場合は入力フォーマットに Markdown を、出力フォーマットに HTML が選ばれます。

実際の Markdown テキストを HTML へ変換する場合は入出力ファイルやフォーマット、テンプレートなどを指定して使います。

pandoc -f markdown input.md -t html5 -s -o output.html

コマンドラインの-sオプションで標準テンプレートを指定すると、出力フォーマットに合わせた標準テンプレートが選択されます。この例の場合、適用されるのは HTML 出力用のhtml5テンプレートです。

html5テンプレートの内容は次のコマンドで確認できます。

pandoc -D html5

また css や MathJax の設定(後述)を含んだカスタムテンプレート(後述)を使用することも可能です。



MarkdownファイルをHTMLファイルへ変換する例

Pandoc では標準の Markdown のほか "GitHub flavored Markdown" もサポートされています。このフォーマットを使用する場合は入力フォーマットにmarkdown_githubを指定します。

  • markdown_github オプションを使って HTML に変換

    pandoc -f markdown_github input.md -t html5 -s -o output.html
    
  • markdown_github オプションで CSS を含んだ HTML に変換。

    pandoc -f markdown_github input.md -c github.css -t html5 -s -o output.html
    

    この例ではカレントフォルダのgithub.cssが HTML 内にリンクされます。このファイルは、はじめから Pandoc に同梱されているわけではないので自分で用意する必要があります。例えば"Github Markdown CSS - for Markdown Editor Preview"などを参考にして作成します。



「段落内の強制改行」を無効化する

Pandoc の拡張 Markdown では、フォーマット名と拡張文字列を使って機能をコントロールします。フォーマット名に拡張文字列を+で結合するとその機能を有効に、-で結合するとその機能が無効化されます。

この例では-hard_line_breaksを結合して「段落内の強制改行」を無効化しています。

pandoc -f markdown_github-hard_line_breaks ^
input.md -c github.css -t html5 -s -o output.html


Markdownテキストに生HTMLを記述

標準の Markdown では、テキスト内に記述した生の HTML はそのまま出力されます。Pandoc でこの機能を有効にするには+raw_htmlオプションを使います。これで Markdown テキスト内に生の HTML を記述できるようになります。

pandoc -f markdown_github+raw_html ^
input.md -c github.css -t html5 -s -o output.html


コードブロックの行番号表示とシンタックスハイライト

GFM の"Fenced code blocks"は、コードブロックを貼り付ける時のインデントが不要なのでとても便利です。

さらに Pandoc は行番号表示やシンタックスハイライトまでサポートしています。この機能を有効にするには+fenced_code_attributesオプションを使います。

pandoc -f markdown_github+fenced_code_attributes ^
input.md -c github.css -t html5 -s -o output.html

例えば、言語に"Ruby"を指定、行番号を表示、開始行を 100 に指定する場合は、コードブロックの属性値をこのように記述します。開始行のstartFrom="100"を省略すると 1 から始まります。

```{.ruby .numberLines startFrom="100"}
puts 'Hello Pandoc!'
```

生成される HTML はこのようになります。.ruby.numberLinesの記述からわかるように、この値はクラスに設定されます。もちろん#fooなら ID に設定されます。

<table class="sourceCode ruby numberLines" startFrom="100">
  <tr class="sourceCode">
    <td class="lineNumbers">
      <pre>100</pre>
    </td>
    <td class="sourceCode">
      <pre>
        <code class="sourceCode ruby">
          puts <span class="st">&#39;Hello Pandoc!&#39;</span>
        </code>
      </pre>
    </td>
  </tr>
</table>

コードブロックのシンプルな記述方法は言語名だけを記述します。この場合はシンタックスハイライトのみ行われます。

```ruby
puts 'Hello Pandoc!'
```

生成される HTML では言語名がクラスに設定されています。

<pre class="sourceCode ruby">
  <code class="sourceCode ruby">
    puts <span class="st">&#39;Hello Pandoc!&#39;</span>
  </code>
</pre>


数式を含んだHTMLを出力する

HTML で数式を扱う場合 MathJax を使うと便利です。MathJax は、数式や LaTeX コマンドを解釈してブラウザで表示できるように変換してくれます。

Markdown の記述に GFM の書式を使い css を追加、MathJax で数式を表示する場合はこのようなコマンドを実行します。

pandoc -f markdown_github-hard_line_breaks ^
input.md -c github.css -t html5 -s ^
--mathjax=https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML ^
-o output.html


カスタムテンプレートを使う

カスタムテンプレートを作っておくと、あらかじめ MathJax のオプション設定や css ファイル等を追加することができます。カスタムテンプレートを簡単に作るには、標準のテンプレート雛形として利用します。

はじめに、次のコマンドを実行してカスタムテンプレートmytemplate.htmlを作成します。

pandoc -D html5 > mytemplate.html

このテンプレートを使用する場合は、コマンドに--mytemplate=mytemplate.htmlオプションを追加します。

pandoc -f markdown input.md -t html5 ^
--template=mytemplate.html -o output.html

カスタムテンプレートの例

次のコードをカスタムテンプレートの</head> の直前に追加すれば、css ファイルと MathJax オプションの設定ができます。

この例ではカレントフォルダの github.css をリンクしています。また、MathJax のオプション設定では日本語の数式メニューやエラーメッセージの表示、数式のズーム設定。インライン数式のデリミタに$...$を使用できるようにしています。

<link rel="stylesheet" href="github.css">
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    menuSettings: {locale: "ja"},
    extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
    TeX: {
      extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"],
      noErrors: {disabled: true},
      noUndefined: {disabled: true}
    },
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [["$$","$$"], ["\\(","\\)"]],
      displayMath: [["$$$$","$$$$"], ["\\[","\\]"]],
      processEscapes: true
    }
  });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

インライン数式のデリミタ$...$について

インライン数式のデリミタは、他にもう一つの設定方法があります。それは、Pandoc の Markdown 拡張書式に、tex_math_dollarsを追加して--mathjaxオプションを指定します。この場合入力テキスト中の$...$\(...\)に、$$...$$\[...\]に変換して出力されます。

2つの設定方法の違い

  • MathJaxのオプションで設定する場合

    テンプレートファイルにtex2jax: { ... }を記述してインライン数式の$...$を有効にする場合は、単独の$記号を表示するときにエスケープしなければなりません。例えばPrice: $100を表示するにはPrice: \$100と記述します。

  • Pandocのオプションで設定する場合

    Pandoc の Markdown 拡張書式tex_math_dollarsの追加と--mathjaxオプションを指定する場合は、Pandoc が$で囲まれた範囲を認識して、数式か数式でないかを判断してくれます。そのためPrice: $100の表示では$記号のエスケープが不要になります。

記述の容易さでは後者の Pandoc オプションで設定するほうが便利かもしれません。その場合は上記コードのtex2jax: { ... }の部分を削除することで、デリミタ以外の MathJax オプションをテンプレートファイルで設定することができます。

後者の Pandoc オプションで設定する場合は次のようなコマンドを実行します。

pandoc -f markdown_github-hard_line_breaks+tex_math_dollars ^
input.md -t html5 --mathjax ^
--template=mytemplate.html ^
-o output.html

テンプレート内に MathJax スクリプトを記述している場合コマンドラインの--mathjaxオプションの指定は不要に思えますが、MathJax が受け取る TeX 形式で数式を出力するためにこのオプションが必要です。なぜなら Pandoc のデフォルトの数式出力では可能な限り Unicode 文字で数式を出力しようとします。



YAMLメタデータブロック

テンプレート内のプレースホルダ($記号で囲まれた変数)を使うと、テンプレートにメタデータを流し込むことができます。Pandoc ではメタデータの流しこみ用にいくつかの方法が用意されていますが、 YAML メタデータブロックを使うと汎用性が高まります。

Pandoc のテンプレートに YAML メタデータブロックを流し込む場合はあらかじめメタデータブロックを別ファイルまたは Markdown テキストの中に作成しておきます。 YAML メタデータブロックは---で始まり、---または...で終ります。

  • テキスト中に記述する場合の注意点は、YAML メタデータブロックの直前に空行を入れることです。ただし、テキストの先頭に記述する場合に限り、この空行は不要です。

  • 別ファイルに作成した YAML メタデータブロックを使用する場合はコマンドラインでファイル名を指定します。例えば YAML メタデータブロックを記述したファイルtest.yamlを指定する場合、次のようなコマンドを実行します。

pandoc -f markdown input.md test.yaml ^
-s -c github.css -t html5 ^
-o output.html

GFM の場合は+yaml_metadata_blockオプションを使います。

pandoc -f markdown_github+yaml_metadata_block ^
input.md test.yaml -s -c github.css -t html5 ^
-o output.html

複数の入力ファイルを指定した場合 Pandoc は、処理を開始する前にファイルとファイルの間に空行を追加してそれぞれのファイルを結合します。前述の YAML メタデータブロックの直前に空行を入れる理由はこのためです。



YAMLを使ったテンプレートの使用例

デフォルトテンプレートには、いくつかのプレースホルダが既に用意されています。実際に YAML メタデータの流し込みを試してみましょう。次の例では入力ファイルinput.mdのテキストの先頭に YAML メタデータブロックを記述しています。

input.md

---
pagetitle: YAMLテスト
title: YAML メタデータテスト
subtitle: サブタイトル
author:
- foo
- bar
date: May 5, 2015
---

#こんにちはPandoc

デフォルトテンプレートを使用するため-sオプションでコマンドを実行します。

pandoc -f markdown input.md ^
-s -c github.css -t html5 -o output.html

GFM の場合は+yaml_metadata_blockオプションを使います。

pandoc -f markdown_github+yaml_metadata_block ^
input.md -s -c github.css -t html5 ^
-o output.html

実行すると YAML メタデータが流し込まれた HTML ファイルが出力されます。プレースホルダの記述方法は、テンプレートと出力されたHTMLファイルを見比べると分かりやすいです。テンプレートの内容はpandoc -D html5で確認できます。



Pandoc変数

テンプレート内のプレースホルダは Pandoc 変数を使って制御することができます。それではテンプレートと出力されたHTMLファイルを見比べてみましょう。

条件分岐

例えば変数$subtitle$では条件分岐が使われています。

この場合、変数$subtitle$に値がセットされていれば
<h1 class="subtitle">$subtitle$</h1>を適用します。

$if(subtitle)$
  <h1 class="subtitle">$subtitle$</h1>
$endif$

出力結果を見ると、このようになっています。

<h1 class="subtitle">これはサブタイトル</h1>

同様に変数$title$では、変数の値がセットされていない場合
<header>...</header>の行全体が適用されません。

$if(title)$
  <header>
  <h1 class="title">$title$</h1>
  $if(subtitle)$
    <h1 class="subtitle">$subtitle$</h1>
  $endif$
  $for(author)$
    <h2 class="author">$author$</h2>
  $endfor$
  $if(date)$
    <h3 class="date">$date$</h3>
  $endif$
  </header>
$endif$

繰り返し

例えば変数$author$ではリスト形式で複数の値がセットされています。このように変数の値が複数ある場合は$for$キーワードを使って値を取得できます。

この場合変数$author$に値がセットされていれば、
値毎に<h2 class="author">$author$</h2>を適用します。

$for(author)$
  <h2 class="author">$author$</h2>
$endfor$

出力結果を見ると、このようになっています。

<h2 class="author">foo</h2>
<h2 class="author">bar</h2>

このようにテンプレートと YAML メタデータブロックを使えば、柔軟なメタデータの流しこみが可能になります。



まとめ

簡単ですが Pandoc の HTML 変換を紹介しました。Pandoc には他にも多くの機能があります、興味を持った方はユーザーズガイドを読んでみてください。

本家ユーザーズガイド

日本語ユーザーズガイド

参考までに、今回使用したオプションを全てコマンドラインに適用すると こうなります。

pandoc -f markdown_github-hard_line_breaks^
+raw_html+fenced_code_attributes^
+tex_math_dollars+yaml_metadata_block ^
input.md -t html5 ^
--mathjax --template=mytemplate.html ^
-o output.html

付録

この投稿で使用したカスタムテンプレートと css を載せておきます。

mytemplate.html


github.css