electron製の旧Marpをずっと使わせて頂いております
この旧Marpなんですが、pdf出力時の画像が荒くなってしまう場合がありました
そんな訳で新Marpに期待しており、pdf化の際に画像がキレイに出るか確認してみました

• Marpとは
  • 旧Marp
  • 新Marp
• 今回試す環境
• 試してみる
  • WSL(Windows Subsystem for Linux)のインストール
  • Dockerのインストール
    • 毎回実行することになるので…
  • Marpのテーマダウンロード
  • marp-cliでhtmlを生成
  • marp-cliでserverモードを起動
  • pdf化
  • 旧Marpとの非互換
• 参考

Marpとは¶

旧Marp¶

• electron製でどのプラットフォームでも動く
• markdownで書いて、pdfで出力できる
• 旧とはいえ、今でも現役。十二分に使える

新Marp¶

• 現在開発中?electron製ではない
• CUIで操作したり、WebUIがあったり、いろいろある
• もちろんpdfも出るし、reveal.jsのような使い方もできる

今回試す環境¶

以下の流れでやっていきます。

• Windows10のWSL(Windows Subsystem for Linux)にDockerを入れる
• MarpのdockerイメージからCLIコマンドを呼び出してブラウザで表示
• ブラウザからの印刷機能でpdf化する

試してみる¶

WSL(Windows Subsystem for Linux)のインストール¶

ググるといろいろ出てくるので省略
私はUbuntsu入れてます。これを試した時の環境は以下

$ cat /etc/issue
Ubuntu 18.04.2 LTS \n \l

Dockerのインストール¶

以下を参考にしましたが、現状だとちょっと異なる点があるので注意

Qiita - [2019年1月版]WSL + Ubuntu で Docker が動くっ！動くぞコイツッ！
https://qiita.com/koinori/items/78a946fc74452af9afba

$ sudo apt update && sudo apt upgrade -y
$ sudo apt install -y docker.io=17.12.1-ce
$ sudo usermod -aG docker $USER

2019.5.3現在、dockerのバージョンが18のやつはWSLでは動かない。WSLが対応していない機能があるらしい。
なので、バージョン指定で1つ前のバージョンを導入する。

いったんターミナルを閉じる。またWSLを立ち上げて

$ sudo cgroupfs-mount
$ sudo service docker start
$ docker version

docker versionの出力結果で server の項目が出てたらok

$ docker version
Client:
 Version:       17.12.1-ce
 API version:   1.35
 Go version:    go1.10.1
 Git commit:    7390fc6
 Built: Wed Apr 18 01:23:11 2018
 OS/Arch:       linux/amd64

Server:
 Engine:
  Version:      17.12.1-ce
  API version:  1.35 (minimum version 1.12)
  Go version:   go1.10.1
  Git commit:   7390fc6
  Built:        Wed Feb 28 17:46:05 2018
  OS/Arch:      linux/amd64
  Experimental: false

hello-world してみて動くことを確認する

$ docker run hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

毎回実行することになるので…¶

sudo cgroupfs-mount と sudo service docker start は、立ち上げる度に必要らしいので、ShellScriptを作った

#!/bin/bash

# dockerの起動
sudo cgroupfs-mount && sudo service docker start
sudo service docker status
echo --------------------------------------------------
docker version
echo --------------------------------------------------
docker run hello-world

Marpのテーマダウンロード¶

デフォルトのテーマでもいいんですが、横に長い(1280pxx720px)です。
普通のやつ(960pxx720px)にしたいため、有志の方?のGitHubが作ったテーマをダウンロードする

$ cd [今Markdownを書いているディレクトリ]
$ wget https://raw.githubusercontent.com/matsubara0507/marp-themes/master/themes/haskell.css

他の種類もあるのでお好みで

marp-cliでhtmlを生成¶

$ docker run --rm -v $PWD:/home/marp/app/ -e LANG=$LANG marpteam/marp-cli ./作ったファイル.md --theme haskell.css

marp-cliでserverモードを起動¶

$ cd [今Markdownを書いているディレクトリ]
docker run --rm -v $PWD:/home/marp/app/ -e LANG=$LANG -p 8080:8080 marpteam/marp-cli ./ --server  --theme haskell.css

実行後、ブラウザで、http://localhost:8080/ にアクセスするとスライドが見れる(reveal.jsみたい)

pdf化¶

あるにはあるけど、私のこの環境で実行するとエラーになってうまくいかない

$ docker run --rm -v $PWD:/home/marp/app/ -e LANG=$LANG marpteam/marp-cli ./作ったファイル.md --theme haskell.css  --allow-local-files

htmlかserverモードでChromeで表示した後、Chromeの印刷機能でpdf化すればキレイに出ました^{^}

旧Marpとの非互換¶

• 画像の%指定による拡大/縮小がなくなった → px指定になった
• 画像の中央寄せができない → 今後に期待(テーマのCSSをいじればなんとかなるかもしれない)

中央寄せができるようになるといいな、旧Marpから乗り換えたい

参考¶