Tambourine作業メモ

主にスキル習得のためにやった作業のメモ。他人には基本的に無用のものです。

日誌用のRakefileとCSS

日々の作業記録とか日誌のようなものをMarkdownで書いて、pandocでHTMLに変換して閲覧している。昔は、ローカルにtDiaryを立ててRDで書いていたんだけど、このぐらいのことならWebサーバを動かすまでもないのでこのスタイルになった。

公にしてよい日々の駄文はココログに、技術的なメモはここ(はてなダイアリー)に書いているが、仕事のミーティングのメモなどはおいそれとサーバ上に置けないのでこうなっている。最近はお客様に見せる手順書なども同じ手順でHTMLにして渡している。もっともそんなことをしているのは私だけで、同僚はみんなExcelで渡しているのでHTMLをExcelで開いて保存しなおして、Excel方眼紙状態(ExcelのHTMLレンダリングはそれは見事な方眼紙だ)で出すことも、ままある。Excelで直接書くより100倍マシである。

で、プロジェクトが変わったこともあって、ずっと使い回していたMD->HTML変換用のRakefileと出力結果にかぶせるCSSに手を入れたので、ここに貼っておく。

require 'fileutils'

MDs = FileList["**/*.md"]
HTMLs = MDs.ext('html')

task :default => HTMLs

rule '.html' => '.md' do |t|
  sh "pandoc -t html5 -f markdown+east_asian_line_breaks -H main.css -o #{t.name} #{t.source} --toc"
end

task :clean do
  HTMLs.each{|f| FileUtils.rm(f) if File.exist?(f)}
end

どこかでググって見つけたんだが、フォーマット指定にeast_asian_line_breaksを入れると改行をスペースに変換されなくなる。これを入れないと、Markdownで改行が入っている位置に、スペースが挿入されてしまう。英語だとそれは必要な処理なんだけど、日本語ではちょっと微妙だったのでちゃんと設定で動きを変えられてありがたい。

また、CSSを埋め込むオプションがあることも今回気がついた。CSSを渡さなくてよいのでちょっと楽。画像ファイルがあればそれは渡さなくてはいけないので問題の解決とはいかない。Windowsだと、作ったHTMLをmhtで保存し直してしまえば、IEで見るならば1ファイルに出来る。pandocのマニュアルにも単独ファイルにするオプションがあるようなんだけど、できあがったものの汎用性とかいろいろ確認するのが面倒で、試してみてない。

tocオプションはHTMLの先頭に目次を出してくれる。-Nとすると、章に数字が付く。しかし、H1にもつく。個人的にはH1はそのページのタイトルとして使いたいので、H2から番号が付くようにしたい。でもそういう設定はないみたいなので、数字を付けるのは止めた。

これでHTMLを作ると、画像にキャプションが付く。スクリーンショットを連続で見せたい場合などにキャプションは邪魔。これを隠すためにはCSSはつくるしかないかなーと作った。ついでに目次はサイドバーに来るようにした。

<style type="text/css">
<!--

h1 {
  border-bottom-width:5px;
  border-bottom-style:solid;
  border-color:#0033FF;
}

h2 {
  border-bottom-width:5px;
  border-bottom-style:solid;
  border-bottom-color:#0099FF;
  border-left-width:25px;
  border-left-style:solid;
  border-left-color:#0099FF;
}

pre {
  color:#FFFFFF;
  background-color:#000000;
  padding:15px;
}

figcaption {
  display:none;
}

img {
  max-width:100%;
}

body {
  margin-left:210px;
}

nav {
  background-color:#333399;
  font-size:xx-small;
  position: fixed;
  width:200px;
  height:100%;
  left:0;
  top:0
}

nav ul {
  list-style-type:none;
  padding-left:5px;
}

nav a {
  text-decoration:none;
  color:#FFFFFF;
}

nav a:hover {
  text-decoration:underline;
  color:#CCCCFF;
}

-->
</style>

このCSSで、

# 出力結果のサンプル

## 目的

pandocで出力したHTMLのイメージを見せたい

## いろいろな出力

### 箇条書き

* ほげ
    1. ふが
    1. ぴよ

### 画像

![Ruby](./ruby.jpeg)

### コード

~~~
$ make
$ make install
~~~ 

を変換したHTMLを表示すると、こんな感じ