182
191

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeでドキュメント作成するならまずこれを入れよう

Last updated at Posted at 2025-03-29

なぜMarkdownか

  • 記法が簡単で表現力が高い(※1
  • テキストなので差分管理がしやすい
  • QiitaもMarkdown形式を採用している

※1 プレビュー機能があるとなおよい!

VSCodeを使うならこの拡張機能を入れてみよう

Markdown All in One

まずはこれを入れていたら間違いないと思う!
詳細は拡張機能の公開サイトを見ていただくといいですが、とりあえずのおすすめポイントは

  • これを入れていたら大体の機能が使える(最初に入れるべき拡張機能)
  • 便利なショートカットが用意されている
    • 太字:Ctrl+B
    • 表のフォーマット:Alt+Shift+F
  • パスの補完をしてくれる
    • ファイルリンク(特に画像)のパスを補完してくれる

Paste Image

これは画像を資料に入れたいときにマストの拡張機能だと思います!

コメントをいただいたので追記します
今はCtrl+Vでスクショを貼れるみたいですね。
保存先パスは同じディレクトリになるのでimgフォルダを作って保存したい場合は、この拡張があるほうが楽ですが、今やマストではないみたいです。

これがないと、

  1. スクショを撮る
  2. 保存先のディレクトリに移動して保存する
  3. 保存したディレクトリのパスをコピー
  4. コピーしたパスを指定して記載

という作業が必要になりますが、この拡張を入れると

  1. スクショを撮る
  2. VSCode上で「Ctrl+Alt+V」で貼り付ける
    1. ここでディレクトリの保存とコード上へのパスの書き出しを行います
    2. ショートカットキーを押した後に保存先パス指定をすることもできます

たったこれだけになります

Markdown PDF

これは作った資料をPDFとして書き出すときに必要なツールになります。
PDFだけではなく、HTML形式にも吐き出せるので、配布する際は便利です。
styleはワークスペースごとなどでCSSファイルを指定できるので、見出しのフォントなどにこだわりがある場合は、CSSを当てておくのもよいでしょう。

Markdownの記法にこだわりたいならこれを入れておこう

markdownlint

これはMarkdownの正しい記法を教えてくれるツールです。
時々鬱陶しいと思うかもしれませんが、リントに従って修正すると決まったフォーマットで作成できるのでお勧めです。

スライドもVSCodeで作りたいならこれを入れておこう

Marp for VS Code

これはVSCodeでスライドまで作っちゃおうっていうときに便利です。
ただしアニメーションを使ったりはできないことと凝ったデザインは難しいので、そういう場合はPowerPointやPages、Googleスライドなどを使ったほうが表現力は上がります

おすすめポイント

  • 画像の配置が簡単
    • ![w:500](./画像のパス)といった形で通常だとキャプションを入れる個所にサイズ指定ができます
    • わざわざhtmlのimageタグでサイズを書かなくてもいいのが便利です
    • pdfやpptx、pngへの出力ができる
      • pptxはエクスポートできるがPowerPointで修正ができないのでお勧めはできない
  • 標準のスタイルが3種類用意されている
    • default
    • gaia(個人的にこれが一番使いやすい)
    • uncover
  • カスタマイズCSSを適用してオリジナルのスタイルも作ることができる

複雑な数式も使いたいならこれも入れておきましょう

Markdown+Math

TeXの数式を使いたい場合は、入れておくと便利かと思います。
これがあれば、TeXでさえ簡単に使えてしまいます。
コンパイルして表示する手間もなくリアルタイムにプレビューが見られるのがいいですね。
まぁ学生時代にあれば使っていただろうという感じですね。今は使うことないかと思います^^;

おわりに

WordやLaTeXでてきていたことがVSCodeだけでできてしまう時代です。
Marpを入れると簡単なスライドもVSCodeだけでできてしまいます(無料でここまではすごいですよね)
今回は省きましたが、vscode-pandocを使えば、編集できる形でWordファイルへ書き出すこともできます。
こちらは興味があれば調べてみてください。試したところでは自作のテンプレートファイルのスタイルを適用することもできました。機会があればやり方の記事を書くかもしれません。

コーディングだけでなく、ドキュメントも簡単に作れてしまうVSCodeはもはや手放せないツールですね。

182
191
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
182
191

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?