2012/09/03

PandocでMarkdownからHTMLプレゼンテーションを作成する

PandocはMarkdown, HTML, LaTeXのソースから、PDF, HTML, odt, epub, docxなどのいろいろな形式で出力ができるコマンドラインツールです。

HTMLプレゼンテーション形式で出力できるようなので、Markdownからの変換を試してみました。

Install

PandocはHaskellで書かれていますが、いちいちHaskellなんかインストールしたくない人のために、 WindowsとMacのバイナリも用意されています。

もちろん、Haskell Platformを導入済みであれば、次のコマンドで導入できます。 手元の環境でコンパイルに15分ほどかかりました。

> cabal install pandoc

つかいかた

MarkdownからHTMLプレゼンテーションファイルを出力するには次のようにコマンドを実行します。

pandoc -t dzslides -i --self-contained -s -o presentation.html sublime.md
  • -tで出力フォーマットを指定します。

    • ここではdzslidesを指定しています。
    • HTMLプレゼンテーションフォーマットはこれ以外にs5, slidy, slideousがあります。
  • -iを指定すると、スライド中の箇条書きが、クリックごとに1項目ずつ表示されるようになります。

  • --self-containedを指定すると、他ファイルが不要な1ファイルのHTMLを作成します。

    • 画像はbase–36かなにかで埋め込みます。
    • ローカルにないファイルもダウンロードしてくれます。
    • -sでstandalone指定しておいたほうがよいでしょう (HTMLタグなどが付く)。

これ以外の利用方法はPandoc User’s Guideに書式があり、 Demosのページにサンプルの入力ファイルと出力結果へのリンクがありますので、これらを参照してください。

なお、slideousとslidyは画面サイズに応じてテキストのリサイズが行われないようですので、今回は利用しません。

タイトルスライド

pandocの拡張Markdownではテキストの最初がタイトルブロックになっています。1行目から、タイトル、作者、日付を入れます。

% 似非Emacs使いがSublime Text 2を試用してみた感想
% safx
% 2012.08.28

シンタックスハイライト

Emacsのobjc-modeなんかと比べるとあっさり目な感じですが、プログラミング言語のハイライトもサポートしています。

通常のMarkdownの4スペース以外にも、次のようにチルダ4つ (~~~~) 以上で挟まれたブロックはコードブロックになります。

チルダ4つのコードブロックの先頭では{}内でハイライトする対象となる言語や行番号の表示などを指定できます。

~~~~ {.objectivec .numberLines}
- (NSString*)checkFoobar:(NSString*)str {
  if ([str isEqualString:@"foobar"]) {
    return @"hoge"; // hoge
  }
  return @"fuga";
}
~~~~

オプション--highlight-style=STYLEでハイライトスタイルを変更できます。 スタイルはpygments (デフォルト), kate, monochrome, espresso, zenburn, haddock, tangoから選択可能。

スタイルのカスタマイズができるのかと思いましたが、 highlighting-kate のText/Highlighting/Kate/Styles.hsあたりでハードコーディングされていました。

ただし、予約語はclass="kw"、文字列はclass="st"みたいになっているので、マークダウン中にスタイルを書いておけばよいみたいです。

なお、利用可能な言語はpandoc -vで見ることができます。

> pandoc -v
pandoc 1.9.4.2
Compiled with citeproc-hs 0.3.4, texmath 0.6.0.6, highlighting-kate 0.5.2.
Syntax highlighting is supported for the following languages:
    Actionscript, Ada, Alert, Alert_indent, Apache, Asn1, Asp, Awk, Bash,
    Bibtex, Boo, C, Changelog, Clojure, Cmake, Coffee, Coldfusion, Commonlisp,
    Cpp, Cs, Css, D, Diff, Djangotemplate, Doxygen, Dtd, Eiffel, Email, Erlang,
    Fortran, Fsharp, Gnuassembler, Go, Haskell, Haxe, Html, Ini, Java, Javadoc,
    Javascript, Json, Jsp, Latex, Lex, LiterateHaskell, Lua, Makefile, Mandoc,
    Matlab, Maxima, Metafont, Mips, Modula2, Modula3, Monobasic, Nasm, Noweb,
    Objectivec, Objectivecpp, Ocaml, Octave, Pascal, Perl, Php, Pike,
    Postscript, Prolog, Python, R, Relaxngcompact, Rhtml, Ruby, Scala, Scheme,
    Sci, Sed, Sgml, Sql, SqlMysql, SqlPostgresql, Tcl, Texinfo, Verilog, Vhdl,
    Xml, Xorg, Xslt, Xul, Yacc, Yaml
Copyright (C) 2006-2012 John MacFarlane
Web:  http://johnmacfarlane.net/pandoc
This is free software; see the source for copying conditions.  There is no
warranty, not even for merchantability or fitness for a particular purpose.

画像

次の拡張markdown書式で画像を表示することができます。が、結構使いものになりません。

![](sublime_img.png)

デフォルトではスタイルの設定あたりがおかしいようで、dzslidesでは縦横100%になってしまい、S5では固定サイズ左寄せになってしまいます。

 

残念ながら、IMGタグを使用したほうが余計なクラスが付かないのでよさそうです。

数式

pandocのオプション--mathmlを付けると、文中に$$$で囲まれた領域をLaTeX書式の数式だと理解してMathMLに変換してくれます。 ちなみに、s5だとフォント設定の問題なのか=などいくつかの記号が消えていました。

Quadratic formula:
$$x = \frac{-b\pm \sqrt{b^2-4ac}}{2a}$$

HTMLで数式を利用する方法は他にもいくつかあります。詳細はPandoc User’s Guideを参照してください。

スタイルの変更

Markdownを利用している場合は、スタイルもSTYLEタグで変更することができます。 デフォルトは白背景に黒文字なのですが、次のように指定するとどこかで見たことがあるようなスライドになります。

<style>
body { background-image: -webkit-linear-gradient(black,#202440,#505060); color:#f0f0f0; }
</style>

なお、毎回利用するスタイルなどは--include-in-header=FILEで指定したほうがよいかもしれません。

まとめ

Pandocを導入して、MarkdownからHTMLプレゼンテーションを作成する方法について紹介しました。

スライドの中ではdzslidesが一番癖がなさそうですが、背景がワイドスクリーン対応でないのが悩ましいです。

Markdownからの変換に関して言えば、画像の処理が唯一残念な点です。 スタイルをうまく調整すればうまくいけそうな気もするのでわかった方は教えてください。

関連情報

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。