A painter and a black cat: 新MarpをWSL上のDockerを使って試す
electron製の旧Marpをずっと使わせて頂いております
この旧Marpなんですが、pdf出力時の画像が荒くなってしまう場合がありました
そんな訳で新Marpに期待しており、pdf化の際に画像がキレイに出るか確認してみました
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から乗り換えたい
