備忘録とか日常とか

学んだこととかを書きます。

Markdownが書きたいのでAtomとVSCodeを整備して比較する

Markdownを書くための環境設定などをメモする。
普段はVSCodeを使っているが、github開発のAtommarkdownと親和性が高そうなので比べてみた。
環境はmacbook promacOS Sierra 10.12.6

Atom

Atomはデフォルトでmarkdownに対応しており、macならctrl + shift + mでリアルタイムプレビューを表示できる。
それに加えて拡張機能も豊富であり、以下のサイトで色々紹介されている。
qiita.com

とりあえず以下の拡張は便利だった。

markdown-writer

各種ショートカットが追加され、キーバインドなどを設定可能。
便利。この後のtool-bar-markdown-writerがもっと便利。

tool-bar-markdown-writer

markdown編集時に、エディタ上部にtool-barが表示される。
markdownの記法を覚えてなくてもGUIで直感的に扱えるようになる。テーブル整形とかも便利。
tool-barmarkdown-writerのパッケージが必要。

markdown-pdf

Atomはデフォルトでhtml出力には対応しているが、pdfなどで出力するにはこのパッケージが必要。
コード部分なども綺麗に出る。
Atomはプレビューや出力のhtml, pdfのデザインなどがデフォルトで綺麗なとこが最大の利点かもしれない。


以下のはちょっと問題があった。

markdown-scroll-sync

プレビューをスクロールすると自動で該当するテキスト部分までスクロールしてくれる。
機能自体は便利で良いのでが、自分の環境ではなぜか動作しなかった。。
Mac以外なら動くのかもしれない。アプデ待ち。

markdown-toc

目次を自動生成してくれるパッケージ。
トピック名を変更しても上書き保存時に目次も変更してくれるのでよい。
が、これで生成したhtmlやpdfのリンクは機能しない。。意味ねえ。。
当然プレビューのリンクも効いていない。

ググってみて、先人がいたと思ったらなんかちょっと違った。
take-she12.hatenablog.com
日本語はidが生成されなくてリンクが正常にいかないらしいということはわかったが、英語でもリンクされない。
何故なのか・・・。
Atom側の問題なのかもしれない。解決できる気がしないのでとりあえず放置。


と思ったらすごいのがあった。

markdown-preview-enhanced

f:id:may46onez:20180309180023p:plain
プレビュー、TOC作成、プレビューとスクロール同期に加えてlatex数式埋め込みからPDF、html、ebook出力などめっちゃ多機能である。
数式埋め込みなど全ての機能を使うには別途パッケージが必要だが、これを入れるだけでとりあえず

  • スクロール同期プレビュー
  • TOC自動作成
  • html出力(リンク生きてる, ただし日本語はだめ)

の三つは実現できる。もうこれだけでいいね!

PDF出力はpuppeteer, phantomJS, princexmlの三つに対応している。princexmlは有償なのでよくわからない。
残り二つについて試してみた

puppeteer

Nodeのライブラリ。今までNode.jsとかいうのに触れた機会がなく、基礎知識など皆無だがとりあえず使う方法だけメモしておく。
Node.jsについての説明は以下だけ読んだ。
qiita.com
qiita.com

macで導入するにはまずhomebrewを導入する。多分↓のでできる。
qiita.com

その後nodeをインストールする。

brew install node
echo 'export PATH="/usr/local/share/npm/bin:$PATH"' >> ~/.bash_profile

するとnpmが使えるようになっているので、

npm install -g puppeteer

とするとpuppeteerでのPDF出力が可能となる。

ここまでやってから、どうやらnodebrewとやらがあるということに気がついた
mmorley.hatenablog.com
homebrewではNode.jsのバージョン管理ができないらしい。
今はよくわかんないので必要になってからでいいかな・・・

PhantomJS

PhantomJSとはwebkitベースのヘッドレスブラウザということらしい。サーバサイドとかウェブ系のことがわからなさすぎて辛い。。
例によってとりあえず使う環境は整えておく。というよりこれはbrewで入れるだけ。

brew install phantomjs

二通りでPDF出力を試したが、puppeteerはコード部分の背景が白くなってしまい、phantomJSはやたらフォントサイズが大きくなってしまうという結果になった。
どっかをいじれば直せるのかもしれないが、とりあえずデフォルトではAtomのプレビューとPDFが綺麗で個人的には一番好き。


VSCode

VSCodeもデフォルトでmarkdownプレビューに対応している。
しかし自動で分割してくれず、shift + command + Vで同じ領域の別タブにプレビュー→自分で画面分割という手順を踏む必要があり、あまりスマートな感じがしない。
以下のパッケージが非常に役に立つ。

Markdown Preview Enhanced

MPE再び。デフォルトでは微妙なmarkdownプレビューを改善してくれる。
Atomと同じctrl + shift + m (またはcommand + K からの V)でMPE Previewを表示でき、自動で画面分割してくれるので余計な操作はいらない。
もはやこれでほぼ事足りる。


一応こんなのもある。

Markdown PDF

VScodeデフォルトのプレビューをPDF変換する。
上書き保存時に自動変換する機能や、スタイルシートを指定して自分好みのpdfを出力できる機能がついており、拡張性が高い。
ただデフォルトだとVScodeのプレビューのまま出てくる上にフォントサイズが少々大きい。
色々いじりたい人向け。ドキュメントが日本語で読みやすい

Markdown All in One

ショートカット、テーブルフォーマット、アウトライン表示などなど、編集する際に役立つ機能が詰まった拡張。
VScodeでがっつりmarkdownを編集する人にはいいかもしれない。
ただしbold体、italic体をトグルするショートカットがVScode自体のショートカットと重複するので注意が必要。

どっちを使うのか

と、ここまで書いたがVScodeには一つ致命的な欠陥がある。
プレビュー表示した状態で日本語を入力→バックスペースを押すとゴミ文字が入力されるというもの。
以下でこの問題が取り上げられている。
forum.vivaldi.net

qiita.com

macOSだけの問題らしい。日本語入力の際に出る不具合だが、プレビュー表示していない時は問題なく編集できる。謎。
今のところ、少なくともMarkdownをプレビュー見ながら編集したければAtomがいいと思われる。