VS Codeのmarkdownで技術書(同人誌)を執筆する方法比較!おすすめは?

おすすめのオンラインプログラミング学習

2010年頃にたくさん電子書籍の記事をたくさん書いていましたが、久々に電子書籍の記事です。noteも使ったのですが、markdownが利用できません。現在はVS Codeのmarkdownの環境に完全に移行しています。

markdownで技術書(同人誌)を執筆する方法は、実に多彩であり、普段はあんま迷わないのですけど、今回は悩んで軽くいろいろ使ってみることに。せっかく調べたので、覚書程度にまとめておきます。最終的に採用したのは最後のものになります。

VS Codeのmarkdownで技術書(同人誌)を執筆する方法比較!おすすめは?

まず、ざっくりとぐぐったあと、Twiterrでも情報収集しました。最初は簡単にすませたかったため、PDFを作成できるものを探しましたが、だんだんと組版の欲求がでてきてそこまでやることにしました。

いろいろと参考になりました。

いろいろとありますね。

組版はほどほどでいいですかね。ただ、デザインはできるとよいです。個人的にはCSS組版に流れ着きます。

LaTeXとCSS組版の比較

スポンサーリンク

電子書籍のおすすめ比較

VS Codeのmarkdownで技術書(同人誌)を執筆する方法一覧

Markdown-pdf

https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

この拡張は簡単だったため、1番最初に試しました。

  • Vs Codeの拡張をいれてPDFに簡単に変換できます。お手軽です。
  • ついでに目次も作成できます。
  • htmlにも変換できます。
  • highlight.jsにも対応。
  • CSSの適応はできたり、ページ数を表示したりできます。
一見、これでよさそうな気もしたのですが、そもそも書籍を作ることに特化していないためクオリエィが高い本が作成できません。物足りなさを感じて辞めました。

Markdown Preview Enhanced

Markdown Preview Enhanced - Visual Studio Marketplace
Extension for Visual Studio Code - Markdown Preview Enhanced ported to vscode

Markdown Preview Enhancedは、VS Codeに高度なプレビュー機能を追加し、エクスポート機能がすごいあります。

  • 変換方法が多彩です。
  • html、ePUB、mobi、PDFなど。
  • pandocも対応(要インストール)。
  • プレビュー画面も高度でVS Codeのデフォルトよりよいため、プレビュー用としての利用価値もあるかも。
一見、これでよさそうな気もしたのですが、PDFの変換にやや難がある気がしました。ただ、使っている方もいるようですし、個人的にはそれほど使い込んでいません。もしかしたら頑張ればなんとかできるかもしれません。。

個人的にはその前にVivliostyleも試してみることにしてそのままVivliostyleユーザーに。

めもだけ残しておきます。

コマンドパレットを実行します。

View > Command Palette > Markdown Preview Enhanced: Customize CSS

コードブロックやbackground-colorの背景がpdf化するとなくなる問題はChromeの印刷設定時に背景の設定を入れればOKです。

Chrome (Puppetter)
ファイル > 印刷 > 詳細設定 > 背景のグラフィックのチェックをいれる。
ファイル > 印刷 > 詳細設定 > ヘッダーフッダーのチェックをはずす。ページ数も表示されなくなります。

PDF(prince)は無料だと商用不可。

その他のpdf変換

他にもいろいろとあるみたいですね。ただ書籍用というより、ただPDFを作成するものが多いです。

MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール | Developers.IO
MarkdownをPDFに綺麗にいい感じに出力したい…!と探し回っていたところ、「md-to-pdf」が最も私の要件に合致したので使ってみました。
md2pdf - CSSを組版に使ってMarkdownをPDFに変換
md2pdf - CSSを組版に使ってMarkdownをPDFに変換の使い方、日本語情報はMOONGIFTでチェック。MarkdownをPDFにするソフトウェアは幾つもありますが、細かい組版に対応しているものは多くありません。ごく簡単なものであれば問題ありませんが、ドキュメントなどで体裁にこだわりたい場合もあるでしょう...

FlightBook

(19) FlightBooks🐤MarkdownでPDFが作れるさん (@FlightBooksJP) / Twitter

FlightBooksという楽にPDFが作成できるサービスのようです。

すごく簡単そうです。
  • 個人的にはさまざまな拡張が使える、Vs Codeから使いたかったが、オンラインエディタのため用途があわず見送り。
  • 速度が遅いらしいという情報もみかけました。

未使用のため、ざっくりとしかとらえていません。もっといいところもあるかもしれません。こちらは同人誌がでていますね。

gitbook

未使用で詳しく調べていないため、紹介だけです。

gitbookの使い方 - Qiita
description: Let's start documentation with gitbook-cli. gitbookの使い方 手軽に記述できる Markdown形式を利用して各種の文章を作成できる gitboo...

Re:VIEW

Re:VIEWのメリットデメリットです。Re:VIEWとPandocを使っている人が多そうでした。

  • 使っている人が多いため情報が豊富でした。
  • テンプレートもあります。
  • Re:VIEWはRubyのインストールが必要ならしいです。
  • LATeX。組版といえどもそこまでPDFを作るのに、結構、細かすぎるかなと思い、
  • また、デザインの柔軟性が欠ける情報もありで見送り。

Re:VIEWは未使用のため、もしかしたらもっといいところがあるかもしれません。

Pandoc

日本製ならRe:VIEW、海外製ならpandocという単純な理解をしました。
  • 使っている人が多いため情報が豊富でした。
  • Pandocのインストールほか、日本語対応も必要です。
  • node.jsを使っているjavascript系の人はこっちがいいかも。
  • 環境構築が面倒。
  • LATeX(個人的にCSSの方が取っつきやすいというだけです。人により違うかもしれません)。
  • デザインの柔軟性がかけるっぽい。。

Re:VIEWとPandocのどちらかを少し使ってみようと思っていたところ、

日本語化はそんなに問題なさそうだったのと、個人的に参考にしていたエンジニアさんがpandoxを使っていたため、こちらを使ってみることに。でも、Pandocをインストールし、途中までやりましたが、途中でCSS組版に興味がうつり、Vivliostyleに切り替えました。

また、使う機会もあるかもしれませんので簡単にめもです。
インスール方法がいろいろあって混乱かもしれませんが、インストーラーで普通にインストールするのが楽です。

Macの場合、pandoc-X.XX.X-macOS.pkgをダウンロードします。

Releases · jgm/pandoc
Universal markup converter. Contribute to jgm/pandoc development by creating an account on GitHub.

通常のソフトのようにインストールし、インストール後、ターミナルにpandoc -vで入っていることを確認しましょう。
(Vscodeは要再起動)

$ pandoc -v
pandoc 2.10.1
Compiled with pandoc-types 1.21, texmath 0.12.0.2, skylighting 0.8.5
Default user data directory: /Users/neru/.local/share/pandoc or /Users/neru/.pandoc
Copyright (C) 2006-2020 John MacFarlane
Web: https://pandoc.org
This is free software; see the source for copying conditions.
There is no warranty, not even for merchantability or fitness
for a particular purpose.

Homebrewなどコマンドラインからインストールする方法もありますが、また、Homebrewのインストールが必要になりますため、今回は採用しませんでした。

しかし、この状態でPDFを書き出すことはまだできません。書き出そうとすると、次のエラーがでます。

pdflatex not found. Please select a different --pdf-engine or install pdflatex

公式サイトのpdfの作成をみると、pdf engineが必要なようです。

Pandocユーザーズガイド 日本語版 [2.7.2] — 日本Pandocユーザ会 2019.02.21 ドキュメント

TeX Liveのリンクを辿ります。macの場合は

MacTeX distribution. > MacTeX Download. > MacTeX.pkg

をダウンロードします。このファイルは重たいですね。

簡易版のBasicTeX.pkgもでていました。重たさにびっくりして結局こちらを使いました。

More Packages - MacTeX - TeX Users Group

中途半端ですいませんが、この先はpandocを使う人は他のサイトをみてください。

pandocは結局あまり使わないことに。vivliostyleが進化してきたこともあり、CSS組版でやることに路線変更しました。もともとブロガーなので、CSSの方がわかりやすいです。デザインはそのうちこりたくなるかも気がしたため。

スポンサーリンク

おすすめはVivliostyle

もちろん、各々が触っている言語などにより導入しやすさも変わるでしょうが、個人的にVivliostyleを採用しました。採用理由は以下のとおりです。

  • 自由にデザインできるものがよかった。CSS組版で作成した本がわりと好みのデザインだった。
  • ブロガーなのでそこそこCSSはわかる。LATeXはわかりにくい情報を結構見かけた。
  • vueを使っていたため、nodo.jsとnpmがすでに入っていた。rudyなどを追加でいれたくなかった。
最初、知りたい情報はぐぐっても、Twitterをみても一部ないものやちょっとわかりにくいものがありました。でも、一度できてしまえば、あとは簡単ですかね。特に、Create Bookができたのち簡単になりました。最近、情報が増えてきましたかね。

以前はmd → Html → PDFを生成する流れでやっていたため、少々面倒だったのですが、Create Bookができたのち、mdをpdfにダイレクトに変換できるようになりました。pandocもインストールしたけどいらなく。

https://twitter.com/Vivliostyle?lang=ja

導入方法はTwitterから最新の情報をたどるのがおすすめです。

ご参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました