ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

「VS Code」を使って「Markdown」で書いたものをプレビューする

Visual Studio Code「VS Code」を使って「Markdown記法」メモを作る方法を調べてみました。

Visual Studio Codeとは

Microsoft社製のエディタです。
Visual Studio Codeは拡張機能があり、それを利用すればサーバー起動させることができたり、GitHubと連携できたりと、初心者でも開発しやすい環境を構築することができます。
Visual Studio Code – コード エディター | Microsoft Azure

セットアップ方法

Markdownをプレビューする方法

今回はMacでMarkdownのプレビューを行います。

ファイル準備

ファイル名の拡張子を「.md」にすると「Markdown」形式として認識されます。

プレビューする

「⌘K」 → 「V」とキーボードを打つとプレビューが表示されます。
ただ少し見づらいため「VS Code」の拡張機能を導入します。

「Markdown Preview Github Styling」インストール

marketplace.visualstudio.com

  • キーワード(markdown preview github)を入力
  • リストに表示された「markdown preview github」を選択
  • インストール

f:id:a1026302:20210518150421p:plain

プレビューを表示

拡張機能Markdown Preview Github Stylingのタブを閉じて、もう一度プレビューを表示させます。
「⌘K」 → 「V」とキーボードを打つとプレビューが表示されます。
f:id:a1026302:20210518144907p:plain

PDF出力

作成したものをPDF出力したくなったのでその方法も追記します。

「Markdown PDF」インストール

拡張機能のメニューを開きます。

  • キーワード(Markdown PDF)を入力
  • リストに表示された「Markdown PDF」を選択
  • インストール

f:id:a1026302:20210518160102p:plain

使ってみる

右クリックし、「Markdown PDF: Export (PDF)」をクリックします。
f:id:a1026302:20210518160302p:plain

ファイルが出力されます。
f:id:a1026302:20210518160435p:plain
PDFファイルを開くと以下のような感じです。
f:id:a1026302:20210518160546p:plain