Markdown
PDF
VSCode
VisualStudioCode

Markdown PDFとテキスト校正くんをいれてVisual Studio Codeを最強のMarkdownエディターにしよう


自分好みのMarkdownエディターを求めて

わたしは、開発しているアプリの仕様やQiitaに投稿する文章などを、マークダウンで書いています。

CotEditorがお気に入りなので、マークダウンで書くときはCotEditorをつかっています。しかし、アプリのスクリーンショットを載せられなかったり、つくった資料をPDFに出力して配布できなかったりして困っていました(そういうときは、Pagesをつかっていました)。

そんな悩みを抱えていたときに、会社の人にVisual Studio Codeの Markdown PDF を教えてもらいました。


Makdown PDFをつかってみよう

Markdown PDFは、その名のとおりマークダウンのテキストをPDFに出力してくれるVS Codeの拡張機能です。

試しにつかってみたらとても便利だったので、インストール手順と使用方法を紹介します。

001.png

まず、VS Codeの拡張機能をクリックして、検索欄に「Markdown PDF」と入力します。

すると、Markdown PDFが表示されるので、インストールボタンをクリックしてインストールします。

これでインストールは完了です。

つぎに、PDFにしたいファイルを開いて、command + shift + pを押します。

002.png

すると、検索窓が開くので、「export」と入力します。

表示される候補のなかから、「Markdown PDF: Export (pdf)」を選択します。

003.png

PDFが出力されました。

出力先は、左下のステータスバーに表示されるので、見にいってみましょう。

004.png

ダウンロードフォルダーにPDFが作成されています。やったね!

005.png

リンクや画像もバッチリですし、ページ番号も振ってくれます。

しかも、けっこう見栄え良くしてくれます。

Mac標準のPagesもいいアプリですが、ちょっとした資料をつくるには機能が多すぎます。

複雑なレイアウトの資料でなければ、マークダウン+Markdown PDFで、手軽に書けるようになりました。


文章の校正のお供にテキスト校正くんをつかおう

文章は書くのもたいへんですが、校正もたいへんです。

そんなときに便利なのが、VS Codeの拡張機能 テキスト校正くん です。

006.png

VS Codeの拡張機能をクリックして、検索欄に「テキスト校正くん」と入力します。

すると、テキスト校正くんが表示されるので、インストールボタンをクリックしてインストールします。

これでインストールは完了です。

校正するときは、VS Codeでテキストファイルを開くだけです。

007.png

テキスト校正くんが開いたテキストファイルの文章を自動的にチェックして、画面下の問題パネルに文章の問題点を表示してくれます。

とても便利で素敵ですね!


おまけ 〜VS Codeでファイルのパスを取得する〜

VS Codeで画像を表示するときには、画像のパスを取得する必要があります。

VS Codeをつかうと、パスの取得も簡単にできます。

008.png

画像ファイルをVS Codeにドラッグ&ドロップすると、画像が表示されます。画像のタブを右クリックして、「パスのコピー」をクリックすると、 /Users/toshi/Downloads/VSCode/009.png のようにファイルのパスをコピーしてくれます。

009.png

あとは、 ![9番目の画像](/Users/toshi/Downloads/VSCode/009.png) のようにマークダウンでリンクを書くと、VS Codeに画像を表示してくれます。

最近VS Codeを使いはじめましたが、簡単に機能を拡張できていいですね。Markdown PDFやテキスト校正くんのような便利な拡張機能を作成してくださった方々にも感謝です。

VS Codeを活用して、バリバリ文章を書いていきましょう。