Marked2を使ってMarkdownからPDFを作る

Gitで管理しているドキュメントはWordやExcelで書くよりも、Markdownで書いた方が保守しやすく、更新が楽になります。

しかし、Markdownで作成するとGitLabなどのMarkdownをレンダリングしてくれるサイトから見るには良くても、外部配布向けにプリント機能でPDFにすると、今ひとつWordで作った方が見栄えがよくなるなぁと感じています。

そこで、Marked2というアプリを使ったPDFの作成方法を紹介します。

目次

Marked2とは?

Marked2はMac用のアプリでMarkdownのビューワアプリです。Mac App Storeから購入するか、SETAPPのサブスク経由で利用可能です。私はSETAPPのサブスク経由で使用しています。

Markdownをある程度、スタイル良くレンダリングしようと思うと、VSCodeにプラグインを入れて、GitHubスタイルのCSSを入れるという方法もあるのですが、けっこう手間がかかります。手間をかかるけど、最初だけなので、それでも良いと思っていたのですが、何度もやっていると面倒になり、私はMarked2を使うようになりました。

Marked2は有償だけあって、最初からGitHubスタイルのレンダリングを選択することができ、PDF以外にもHTMLやdocx形式の出力も可能です。この記事ではPDFにしますが、docxに出力して、Wordで仕上げても良いでしょう。

Marked2の設定

MarkedメニューのPreferencesから色々設定できます。私のお勧め設定は以下の通りです。

Styleタブ

Styleタブは、Default style:GitHubに変更します。MarkdownがGitHubと同じスタイルでレンダリングされます。

GitHubスタイルに変更する
GitHubスタイルに変更する

Exportタブ

Print background colors and images, Use first H1 as fallback title, Indicate page breaks in previewをオンにします。

Indicate page breaks in previewをオンにすると、プレビュー上でページ区切りが分かるので、必要に応じて、ページ区切りを追加します。

Headers and FootersTop Left%titleBottom Right%page/%totalを設定し、Include on first pageHeaderFooterをオンにします。

PDF化したときに、ヘッダーにドキュメントタイトル、フッターにページ番号が挿入されます。

出力オプションを設定する
出力オプションを設定する

PDFの作成

PDFを作成するには、FileメニューからExport As -> Save PDF (Paginated) を選択します。

Tips

Markedを使ってPDFを作るときのちょっとしたTipsを紹介します。

特定の場所でページを区切りたい

Markdownの中で、次のように書くと、そこで改ページが行われます。

<!--BREAK-->

目次を入れたい

PDFのしおりにはなってくれないのですが、ハイパーリンク付きの目次ページを生成できます。Markdownの中で次のように書いた場所に目次が生成されます。

<!--TOC-->

PreferencesウインドウのExportタブのPrint table of contentsオプションはオフで使用します。Print table of contentsオプションだと、強制的にドキュメントの先頭に生成されてしまうので、使い勝手が悪いです。

また、Page break afterオプションをオフにしても、次のように<!--BREAK-->とセットで使えば、目次専用ページを任意の場所に作れるので、使いやすいです。

<!--BREAK-->
## 目次

<!--TOC-->
<!--BREAK-->

<!--TOC-->よりも前に書いた見出しは目次の対象にならないので、目次に入れたくない項目は<!--TOC-->よりも手前に書きます。例えば、次のよう感じです。

# 動作確認結果

A.Hayashi

本資料は、動作結果についてまとめている。

## 改訂履歴

- 2022年6月27日 新規作成

<!--BREAK-->

## 目次

<!--TOC-->
<!--BREAK-->

## 動作環境

動作環境は以下の通り。

## Beta1での結果

Beta1では問題なし

これをMarkedでプレビューでのページ区切り表示有りでレンダリングすると次のようになります。

レンダリング結果
レンダリング結果

目次の前後でページ区切りがあり、目次専用ページになっています。また、目次には改訂履歴目次といった見出しが含まれていません。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Akira Hayashiのアバター Akira Hayashi 代表・ソフトウェアエンジニア

アプリ開発が好きなアプリ開発者。このブログは学習メモを記事にしたテックブログです。仕事ではアプリ開発をメインに、技術書の執筆やセミナーの講師などもしています。業務や著書のサイトはこちらです→ アールケー開発

目次