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

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

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

出会いと動機

Qiitaをはじめとして、Markdown書式絶好調な世の中ですが

私の様にいまだにHTMLでページ作ってる時代遅れな人間もいるものでして。

過去のデータをutf-8化したから次はHTML5化だー

、、、と、目的を持ちながらも体系的に学ぶ気にもあまりなれず、出来る限りラクして作りたいなーて思っていた日々な訳です。

んで冒頭のMarkdown形式について調べていたら、Haskellで書かれたパーサー Pandoc の存在をsky_yさんの投稿で知った訳ですね。

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

準備

環境はWindows7 pro 64bit

環境変数とか色々面倒くさいので、Chocolatey でHaskellプラットフォームとpandocをば。

あると便利なもの

Rapid Environment Editor
- Windows の環境変数いじりに
  パスがおかしい所とかをすぐに見つけられます
  cinst Devbox-RapidEE

Chocolatey のインストール

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

@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 を使います。

cinst HaskellPlatform

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

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

cabal update
cabal install cabal-install
cabal install -fhighlighting pandoc

ここは滅茶苦茶時間かかりますが、辛抱強くお待ち下さい。

(-fhighlighting オプションは要らないかもしれないけど)

コマンドプロンプトで、pandoc -v と入力して、バージョン表示されればok.

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

テンプレートの作成

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

pandoc -D html5 > html5_template.html

んでそれを元に不要な部分を削って、自分のページで使いたいヘッダとかCSS とか色々指定しつつ

出力された時に綺麗なソースになるように、体裁を整えたのが以下。

<!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 をちょいと変更した物を使わせていただいております。

ここに置いてあります。

Highlight.js は、Pandoc が本来持つSyntax ハイライト機能を使うのであるなら不要です。

テーマ一覧はこちら。

バッチでラクをする。

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

YGGDRASILL SOFT!! で公開されていた、gendoc というバッチを参考にさせていただきました！ありがとうございます。

@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ソースがきったいない時は、テンプレートの変数の位置を調整するとあっけなく修正出来たりします。