PandocでMarkdown からHTML5へ。テンプレート指定で思った通りの書式にするラクをする(?


## PandocでMarkdown からHTML5へ。テンプレート指定で思った通りの書式にするラクをする(?

初投稿です、宜しくお願いします(・θ・)

### 出会いと動機

Qiitaをはじめとして、Markdown書式絶好調な世の中ですが  
私の様にいまだにHTMLでページ作ってる時代遅れな人間もいるものでして。  
過去のデータをutf-8化したから次はHTML5化だー  
、、、と、目的を持ちながらも体系的に学ぶ気にもあまりなれず、出来る限りラクして作りたいなーて思っていた日々な訳です。

んで冒頭のMarkdown形式について調べていたら、Haskellで書かれたパーサー **Pandoc** の存在を[sky_y](http://qiita.com/sky_y/items/80bcd0f353ef5b8980ee)さんの投稿で知った訳ですね。  

ええ、勿論飛びつきましたよ私だって健全な男の子ですもの。

### 準備
環境はWindows7 pro 64bit  
環境変数とか色々面倒くさいので、[Chocolatey](https://chocolatey.org/) でHaskellプラットフォームとpandocをば。

#### あると便利なもの
+ Rapid Environment Editor
    + Windows の環境変数いじりに  
      パスがおかしい所とかをすぐに見つけられます  
      `cinst Devbox-RapidEE`

#### Chocolatey のインストール
以下のコードを管理者権限のコマンドプロンプトにペーストして、ベースをインストール。

```bat
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
```


#### Haskell Platform(Gkasgow Haskell Compiler(GHC)) のインストール
`choco install xxx` の略である `cinst` を使います。

```hs
cinst HaskellPlatform
```

これで Haskell パッケージ管理コマンド cabal がインストール出来ます。


#### Haskell Platform のアップデートとPandoc のインストール

```Haskell
cabal update
cabal install cabal-install
cabal install -fhighlighting pandoc
```

ここは滅茶苦茶時間かかりますが、辛抱強くお待ち下さい。  
(`-fhighlighting` オプションは要らないかもしれないけど)  
コマンドプロンプトで、`pandoc -v` と入力して、バージョン表示されればok.

`cinst pandoc` でもインストール出来ますが、これだとバージョンが1.11.1 になってしまいますので、、。

### テンプレートの作成

以下のコマンドで、html5テンプレートを作成しておきます。

```hs
pandoc -D html5 > html5_template.html
```

んでそれを元に不要な部分を削って、自分のページで使いたいヘッダとかCSS とか色々指定しつつ  
出力された時に綺麗なソースになるように、体裁を整えたのが以下。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta name="author" content="TEVA">
    $if(date-meta)$<meta name="dcterms.date" content="$date-meta$">$endif$
    <link rel="shortcut icon" href="../../favicon.ico">
    <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
    <style type="text/css">code{white-space: pre;}</style>

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif] -->
    $if(quotes)$<style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>$endif$
    $if(highlighting-css)$<style type="text/css">$highlighting-css$</style>$endif$
    $for(css)$<link rel="stylesheet" href="$css$">$endfor$
    $if(math)$$math$$endif$
    $for(header-includes)$$header-includes$$endfor$
    <!-- Pandoc 本来が持つSyntax highlight だけでいいのなら、不要 -->
    <link rel="stylesheet" href="../template/highlight/styles/sunburst.css">
    <script src="../template/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <!-- /# -->
  </head>
  <body>
    <div id="wrapper">
      <article>
        $for(include-before)$$include-before$$endfor$$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$
          $endif$$if(toc)$<nav id="$idprefix$TOC">$toc$</nav>$endif$</header>
$body$$for(include-after)$$include-after$$endfor$
      </article>
      <footer>
      <hr />
      </footer>
    </div><!-- /#wrapper -->
  </body>
</html>
```
※ Syntax Highlight が効いていなかったのでちょいと修正しました。

ページのFavicon とかCSS は直接埋め込んでしまえばちゃんと読みに行ってくれます(・∀・)  
ここではgitHubっぽいCSS をちょいと変更した物を使わせていただいております。  
[ここに置いてあります。](https://gist.github.com/TEVASAKI/9c9da230a6a9f2cda9ce)

[Highlight.js](https://highlightjs.org/) は、Pandoc が本来持つSyntax ハイライト機能を使うのであるなら不要です。  

[テーマ一覧はこちら。](https://highlightjs.org/static/test.html)
### バッチでラクをする。

んで、Vimなりなんなりでmd 形式のマークダウン文章を作った後、
右クリックの送るメニューから一発変換出来るシェルってかバッチを作ります。  

[YGGDRASILL SOFT!!](http://www5d.biglobe.ne.jp/~yggsoft/) で公開されていた、gendoc というバッチを参考にさせていただきました！ありがとうございます。

```bat
@echo off

rem - - - - - - - - - - - - - - - - - - -
rem This script is forked by 'gendoc'.
rem Thanks by YGGDRASILL SOFT!!
rem http://www5d.biglobe.ne.jp/~yggsoft/
rem - - - - - - - - - - - - - - - - - - -

rem BAT option
rem               : ~d          ドライブレター
rem               : ~p          パス名
rem               : ~n          ファイル名
rem               : ~x          拡張子
rem               : ~t          ファイルの日付と時刻

rem pandoc option
rem               : --template  テンプレート指定。このシェルと同じ場所に置いておく必要がある
rem               : -c          CSS の指定(Pandocの好きな様に叩き込んでくれ)
rem               : -f          入力形式指定
rem               : -o          出力名指定 , 第二引数に入力ファイル名
rem               : -S          Typography的に正しく出力する(smartMode)
rem               : -V          テンプレート内の各種Haskell 引数指定

rem SendTo "%APPDATA%\Microsoft\Windows\SendTo\gendoc.lnk"

rem 生成されるHTMLは同じ場所に作られるので、cssはmdから見た相対パス指定で。
rem あと、ファイル名からH1タイトルを加工して生成するようにした
rem (ex) 20141108.md → <h1>2014/11/08</h1> となる


if exist "%~d1%~p1%~n1%~x1" (
  set F=%~d1%~p1%~n1
  set R=%~n1
) else (
  echo 処理できるファイルがありません - 「%~d1%~p1%~n1%~x1」
  pause
  goto :EOF
)

pandoc --template "%~d0%~p0\html5_template.html" ^
-c "../template/markdown-style.css" ^
-f markdown_github+footnotes+definition_lists+pandoc_title_block+header_attributes ^
-o "%F%.html" "%F%%~x1" ^
-S ^
-V pagetitle="%R:~0,4%/%R:~4,2%/%R:~6,2%" ^
-V date-meta="%~t1" ^
-V title="%R:~0,4%/%R:~4,2%/%R:~6,2%"
if errorlevel 1 (
  echo pandocの処理に失敗しました
  pause
  goto :EOF
)

rem てゆーか、コメント内に引数の"%~d" とか書いていたら解釈されるんですが、、、
rem これバグじゃねーの
```

※ Syntax Highlight が効かなかったので、少し修正しました。
※ バッチのエスケープ文字って`^`なんですね、、初めて知りました(・﹃・)

`-V` オプションで、渡したい項目を指定する様ですので、適宜追加してください。

ちょっと追加しました。  
ファイル名を取得してページタイトルに加工して渡す処理追加。
これにより、何度も日付を入力する必要が無くなり、 HTML5的に正しい、headerタグを挿入する事が可能になりました。

んで、これをSendTo "%APPDATA%¥Microsoft¥Windows¥SendTo¥gendoc.lnk" に作成して
対象のマークダウンファイル上で送ってやれば、同じファイル名のHTMLが作成されます！  
**素晴らしい！！**

### 課題
* openSuse13.2 とCentOS6.5 も使っているので、同じような仕組みを作りたいなーと
シェルが使えるからもう少し簡単だと思いますが、さーどうしましょうかねー。

* code表示がずれる件は、テンプレートの"$body$" にインデントをかけていた事が原因でした。
右に4つインデントをかけると、それに伴いpreタグも一緒に4つずれる、と。

* `-S`オプションを指定しても出力されるHTMLソースがきったいない時は、テンプレートの変数の位置を調整するとあっけなく修正出来たりします。