[Visual Studio Code][Windows] MarkdownでPDF/HTML/DOCXファイルへの変換方法とチートシート

こんにちは。kei（@boot_kt）です。

Markdownを書くのにどんなツールを使っていますか？
Markdown専用エディタもありますが、Markdownのためだけにツールを切り替えるのって面倒じゃないですか？
（もちろん専用ツールだと便利な機能があるので使う意味はありますけど）

もしあなたがVisual Studio Codeを使っているのであればそのままVisual Studio CodeでMarkdownを書くことをオススメします。

➊ Markdownってなんですかー？

Markdown（マークダウン）をご存知ですか？

GitHubやQiitaでも採用されている記法です。
 

Wikipediaにはこんな風に書いています。

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。
各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

引用:Wikipedia – Markdown

なんかよく分からないので、超簡単に言ってしまうと・・・・

HTMLタグを書くのが面倒
代わりに * とか # とかの記号を1-2文字程度書くだけでHTMLタグを使ったようにエエ感じできれいに表示してくれる記法

って感じかな。

➋ Markdown記法のチートシート

次項の内容をPDF化したものを以下からダウンロードできます。
良かったら、チートシートとしてご利用ください。

MarkdownCheatsheet_Ver.1.0

➌ Markdown記法のSyntax（構文・書き方）

Markdownの基本的な構文は以下をご覧ください。

daringfireball.net

 

1 share

189 users

Daring Fireball: Markdown Syntax Documentation

help.github.com

 

126 shares

11 users

https://help.github.com/articles/markdown-basics

Markdown記法の命令（？）の数は僅かなので、すぐに覚えられるでしょう。
しかし注意するべき事があります。
以下の注意事項をよく読んでおいてください。

以降、Markdown記法を列挙しますが、MarkdownとそれをHTMLへ変換した場合のものを並べて書いておきます。
Visual Studio Codeではどのような表示になるか、出力されたHTMLはどうなるか、実際に動かしながら参照すると良いでしょう。

Block Elements（ブロック要素）

Paragraphs and Line Breaks（段落と改行）

Headers（ヘッダ）

Blockquotes（ブロック引用符）

Lists（リスト・箇条書き）

Code Blocks（コードブロック）

Horizontal Rules（水平線）

Span Elements（スパン要素）

Links（リンク）

Emphasis（強勢・強調）

Code（コード）

Images（画像）

Miscellaneous（雑多）

Automatic Links（自動リンク）

Backslash Escapes（バックスラッシュエスケープ）

Tables（テーブル）

Others（その他）

➍ Visual Studio CodeでMarkdwonのプレビューを見る方法

Visual Studio Codeのデフォルト状態で可能です。
拡張機能（プラグイン）は不要です。

1. Visual Studio Codeを起動します
2. 新しいファイルを作ります
   別に保存しなくてもプレビューは見られますが、保存しているとリアルタイムにプレビューが変化しますので、拡張子mdで保存しておくことをオススメします
3. Markdownで何か書きます
   例えばこんな感じ

   ## 料理のレシピ
   ## 酢ぶた
   ### 材料
   * 酢：大さじ **2**
   * しょう油：大さじ **1**
   * 砂糖：大さじ **9**
   * 酒：大さじ **3**
   ### 手順
   1. 混ぜる
   1. 捏ねる
   1. 食べる
   

4. Ctrl + Shift + V でプレビュー画面が表示されます
5. ウィンドウを左右分割にでもしておけば書きながらプレビューが見られます

➎ Visual Studio Codeにpdf変換用のプラグインを入れる

Markdownからpdfに変換するには

Markdownからpdfに変換する方法は、僕が知っているのは二通りあります。

• Pandoc と MiKTeX と vscode-pandoc を使う
• Markdown PDF を使う

今回はMarkdown PDFパターンを使います。
Pandoc＆MiKTeXを使うパターンはちょっと面倒なので選択しません。

Markdown PDF（プラグイン）のインストール

Markdown PDFはVisual Studio Codeのプラグインなのでインストールはいつも通りです。

1. 『Markdown PDF』で検索する
2. インストールボタン押す
3. 有効ボタン押す
   ※Visual Studio CodeのバージョンによってはReloadボタンの場合あり
4. Visual Studio Codeを再起動する
   ※Visual Studio Codeのバージョンによっては再起動が不要な場合あり

使い方（pdfへの変換）

使い方は超簡単です。

1. Markdownを書いたmdファイルの上で右クリック
2. Convert Markdown to PDF をクリック
3. mdファイルと同名＋拡張子pdfでPDFファイルが生成されます
4. 生成されたら画面上部に生成されたPDFファイルのフルパスが表示されます
5. 手動でそのファイルを開きます

たったこれだけです！
簡単でしょ！

ただし注意があります！

Visual Studio Codeのプレビューで見ている状態と全く同じ表示がそのままPDFに反映されるとは限りません。
と言うか、Visual Studio CodeのプレビューとPDFの表示は全く別物という意識を持った方が良いです。

PDFにコンバートしたら必ず中身を確認してください。

➏ Visual Studio Codeにhtml／docx変換用のプラグインを入れる

MarkdownをPDF化する方法を先にご紹介しましたが、実際の所、MarkdownをPDFに変換する需要ってあるのかな？と思ってます。
ワープロソフトで書いたほうが早くね？と思っていたりします。(笑)

HTMLファイルに変換する方が多いんじゃないかな。
HTMLのタグ打つよりはMarkdownの方がラクだろうしメリットもあるでしょう。
 

ついでにwordのdocxファイルへの変換方法も書いておきます。
それこそ、Markdown → docx への変換なんて需要あるんかいな？と思いますけど、ま、ついでですわ。
 

ってことで、必要なものは以下の通りです。

• Pandoc
• vscode-pandoc

Pandocのインストール

Pandocは以下からダウンロードしてください。

pandoc.org

 

1 tweet

609 shares

57 users

Pandoc - About pandoc

Installing → Windows → download page

• Windowsの場合：pandoc-1.18-windows.msi
• Macの場合：pandoc-1.18-osx.pkg

インストール手順

1. ダウンロードすればこんなアイコンができます
   
2. インストールしましょう
   
   

   

これだけです。

vscode-pandoc（プラグイン）のインストール

vscode-pandocはVisual Studio Codeのプラグインなのでインストールはいつも通りです。

1. 『vscode-pandoc』で検索する
2. インストールボタン押す
3. 有効ボタン押す
   ※Visual Studio CodeのバージョンによってはReloadボタンの場合あり
4. Visual Studio Codeを再起動する
   ※Visual Studio Codeのバージョンによっては再起動が不要な場合あり

使い方（html／docxへの変換）

使い方は超簡単です。

1. Markdownを書いたmdファイルの上で Ctrl + K + P
   
   ショートカットキーについて

   1. Ctrl + K を押す
   2. 離す
   3. P のみを押す

2. 画面上部に『pdf』とか『docx』とか『html』の選択肢が出てくるので、変換したいものを選びます
   
   選択肢について
   この記事では『pdf』には対応していないため、『pdf』を選択しないでください。
   PDFファイルを生成するには、Markdown PDFプラグインの機能を使ってください。
   
3. mdファイルと同名＋拡張子html（or docx）でhtmlファイル（or docxファイル）が生成されます
4. 生成されたら自動的にそのファイルが立ち上がります

たったこれだけです。
簡単でしょ！

ただし注意があります！

Visual Studio Codeのプレビューで見ている状態と全く同じ表示がそのままhtml/docxに反映されるとは限りません。
と言うか、Visual Studio Codeのプレビューとhtml/docxの表示は全く別物という意識を持った方が良いです。

html/docxにコンバートしたら必ず中身を確認してください。

➐ 大量のmdファイルをまとめてhtml化する方法

ここまでの内容で、以下の二つの事がお分かり頂けたかと思います。

• Markdown記法
• Visual Studio CodeでMarkdownのプレビューを見る
• Visual Studio CodeでMarkdownをpdf/html/docxに変換する

これで充分と言えば充分だと思いますが、これでは物足りない場面があるでしょう。

例えば、仕事においてこんな状況はありませんか？

上記のやり方が良いか悪いかは置いといて、大量のmdファイルを一個一個ちまちまhtmlへの変換なんてやってられません。
面倒だし、工数はモッタイナイし、変換漏れが出てしまうでしょう。

一発で変換する方法が必要です。

で、ここからはPandocとbatの使い方になります。
せっかくPandocをインストールするんですから、Pandocで一括で変換させればいいんですよ。

一括変換バッチ

以下のbatをmdファイルのあるフォルダに置いて実行してください。
サブディレクトリも含めて全てのmdファイルをhtmlファイルへ変換してくれます。

@echo off
cd /d %~dp0

REM 再帰的にmdファイルを走査し、htmlファイルへ変換する
for /r %%A in (*.md) do (
    echo %%A
    
    REM 等幅フォントで見てください
    REM     +------------------------------------- -fはFROMという意味
    REM     | +----------------------------------- FROMファイルのフォーマットを指定
    REM     | |         +------------------------- -tはTOという意味
    REM     | |         | +----------------------- TOファイルのフォーマットを指定
    REM     | |         | |           +----------- -sはSTANDALONEという意味
    REM     | |         | |           |  +-------- -oは出力という意味
    REM     | |         | |           |  | +------ 出力ファイルの指定
    REM     | |         | |           |  | |
    pandoc -f markdown -t html "%%A" -s -o "%%~dpnA.html"
    pandoc -f markdown -t docx "%%A" -s -o "%%~dpnA.docx"

    REM ↑必要な方を使えばいいし、両方使っても良い
    REM フォーマットの種類は以下を参照
    REM http://pandoc.org/MANUAL.html
    REM     [Options] - [General options]
)

exit /b

➑ 使い方のご提案

ブログを書く際、多かれ少なかれHTMLタグを使うことがあるでしょう。
僕がブログを書く時はHTMLタグをたっくさん書きます。

でもまともにHTMLタグを書いていると大変なのでスニペットツールであるPhrase Expressを使っています。
Phrase Expressについてはコチラの記事をご覧ください。
>> 【ホンマに使わな損やで！】スニペットツールのPhraseExpressで入力効率が100万億兆倍アップ！アップ！アップゥー！

スニペットツールを使いたくないのであれば、HTMLじゃなくてMarkdownで書いてみてはどうでしょうか？

1. Markdownで書く
2. HTMLに変換する
3. ブログ投稿する
4. 必要があれば手直しする

という進め方だと、少し投稿への手順は増えますが、HTMLタグを気にすること無く記事を書けますしプレビューでイメージがつかみやすくなります。
記事を書く時間自体が減るかも知れませんので、割りとおすすめです。

参考URL

Pandoc

pandoc.org

 

1 tweet

609 shares

57 users

Pandoc - About pandoc

GitHub

 

106 shares

jgm/pandoc

pandoc - Universal markup converter

Pandoc ユーザーズガイド 日本語版

sky-y.github.io

 

39 shares

241 users

Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User's Association

MiKTeX

miktex.org

 

1515 shares

12 users

Home - MiKTeXorg

miktex.org

 

39 shares

Install MiKTeX - MiKTeXorg

Markdown: Syntax

daringfireball.net

 

1 share

189 users

Daring Fireball: Markdown Syntax Documentation

Markdown Basics

help.github.com

 

126 shares

11 users

https://help.github.com/articles/markdown-basics

日本語Markdownユーザー会 – Markdown記法とは

www.markdown.jp

 

9 shares

31 users

Markdown記法 · 日本語Markdownユーザー会

Markdownの書き方（記法）の紹介

Wikipedia – Markdown

ja.wikipedia.org

 

41 shares

249 users

Markdown - Wikipedia

Qiita – 多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう

Qiita

 

121 shares

322 users

多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう - Qiita

==============================================追記（14.02.07）--------------(http://johnmacfarl...

ARMERIA – PandocでMarkdownからPDF化を試してみた

ARMERIA

 

7 shares

23 users

PandocでMarkdownからPDF化を試してみた - ARMERIA

最近、やれ社内向けの説明資料作りだ、やれ雑用だ、という感じで、仕事で開発っぽいことができていません… 社内資料ではExcelかPowerPointを使わないと一部のオジさん達...

vscode-pandoc

GitHub

dfinke/vscode-pandoc

vscode-pandoc - Visual Studio Code extension lets you render markdown to pdf, word doc or html with pandoc

$m0t0k1x2[“code”].content – マークダウンからPDFを作るならPandocよりmarkdown-pdfっすね

$m0t0k1x2["code"].content

 

7 users

マークダウンからPDFを作るならPandocよりmarkdown-pdfっすね

タイトルのまんまです。いま書いている電子書籍のおまけで、ダウンロードできるPDFを作ろうと思い立ちまして。我ながらなんという無計画…そこでドキュメント変換...

Markdown PDF（プラグインページ）

marketplace.visualstudio.com

 

1 tweet

3 shares

3 users

Markdown PDF - Visual Studio Marketplace

Extension for Visual Studio Code - Convert Markdown to PDF

vscode-pandoc（プラグインページ）

marketplace.visualstudio.com

vscode-pandoc - Visual Studio Marketplace

Extension for Visual Studio Code - Renders markdown through pandoc

まとめ

昔、Wiki記法のソフトを使ってメモを取っていました。
個人的なメモなので体裁整える必要も無いので、最終的には単なるテキストファイルのメモに切り替えましたけど(笑)
 

最近はGitHubやQiitaで使われていることもあり、Markdownでドキュメントを書くことは珍しいことではありません。

と言うよりも、Markdownぐらいは書けないとダメ！っていうぐらいです。

そんな難しいものでもありませんのでぜひ使ってみてください。

参考書籍

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

posted with ヨメレバ

清水 美樹 工学社 2014-05

Amazon

Kindle

楽天ブックス

honto

マークダウンでテキストから電子書籍を作ろう[Kindle版]

posted with ヨメレバ

柏原基規 2015-11-10

Kindle

はじめてのVisual Studio Code (I・O BOOKS)

posted with ヨメレバ

清水 美樹 工学社 2016-05

Amazon

Kindle

楽天ブックス

honto