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