VS CodeでMarkdownで書いた文書ファイルをプレビューする方法

preview

photo credit: Team De Rooy RM183062 via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

さて、以下の記事で技術同人誌の制作プロジェクトとその概要についてお伝えしました。

技術同人誌とそのメリット&ノンプロ的な作り方の手順について
著者自らが書籍を制作する「技術同人誌」がブームになりつつあり、制作を目指して企画を進めています。今回は技術同人誌とは何か、またそのメリット、そしてノンプログラマー的な作り方の手順についてお伝えします。

その中で、執筆環境としてはVisual Studio Code(VS Code)を使い、Markdown記法で書くということを前提にするとお伝えしています。

ということで、このシリーズではVS Codeを使ったMarkdown記法での執筆の方法についてお伝えしていきます。

まずは、VS CodeでMarkdownで書いた文書ファイルをプレビューする方法からお伝えしていきます。

では、行ってみましょう!

スポンサーリンク

Visual Studio Codeとは

Visual Studio Code(VS Code)とは、Microsoft社製のエディタです。

多機能でありながら軽量かつ高速で、とても人気があります。

プログラミングのコードを書いたり実行したりすることが主な役割なのですが、その多機能性や拡張性から、文章を書くために使用されることも多いのです。

なぜノンプログラマーの執筆用に適しているのか

今回、ノンプログラマーの執筆にVS Codeを選んだ理由はなんでしょうか。

まずその一つの理由は、文書を執筆するために使用するMarkdownの記述に強いということが挙げられます。

Markdownで書いた文章のプレビューはデフォルトで搭載されていますし、その支援をするための優秀な拡張機能が揃っています。

もうひとつは、ノンプログラマーが利用するプログラミング言語との相性が良いということです。

PythonはVS Codeでそのまま書けますし、得意とする言語です。

Pythonを開発するエディタVisual Studio Codeについてとそのインストール手順
非エンジニアのWindowsユーザー向けに、AnacondaとVisual Studio CodeでPythonの環境を作る手順をお伝えしています。今回はエディタVS Codeのインストールについてです。

また、Google Apps Scriptの新しいエディタは、Monaco Editorが採用されているのですが、実はVS Codeも同様にそれを採用しているのです。つまり、完全に同一ではないにせよ、多くの部分は共通です。

新IDEで「GoogleAppsScript完全入門第2版【2-3 スクリプトエディタの編集機能(前半)】」を読むときの変更点
GASの新IDEが提供開始となりました。新IDEで「詳解! Google Apps Script完全入門 [第2版]」を読み進める際に注意すべき点が出てきます。今回は「2-3 スクリプトエディタの編集機能(前半)」についての変更点をまとめています。

以上の理由から、ここではVS Codeでの執筆をおすすめしています。

VS Codeのインストール

Windows、Macでのインストールの方法については、以下のそれぞれの記事におまかせしますので、まだの方はこちらを参考にどうぞ。

【ゼロから!】Visual Studio Codeのインストールと使い方
Visual Studio Codeとは通称VSCodeと呼ばれ、Microsoft社が開発したオープンソースのテキストエディタだ。このページではVSCodeのインストール方法や基礎的な使い方について、初心者の方向けにまとめてみた。参考にし...
MacOSでVisual Studio Codeをインストールする手順 - Qiita
Visual Studio Codeとは通称VSCodeと呼ばれ、Microsoft社が開発したテキストエディタです。他のテキストエディタに比べ、HTMLやCSSなどを書く時の補助的な機能が揃って…

Markdownのプレビューの方法

では、まずMarkdownで記述した文書のプレビューのしかたから見ていきましょう。

Markdownのファイルを用意

まず、以下のようなMarkdownのファイルを用意しました。

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

VS CodeでMarkdownのファイルを用意

ご覧の通り、ほとんどが通常の文章を書く感じですが、たまに「#」とか「!」とか「()」「[]」などの記号を用います。

記述の方法の詳細は、シリーズの後ほどで別途お伝えしていきますので、今のところは「こんなものか~」くらいでスルーしておいてください。

Markdownファイルをプレビューする

VS Codeでは、Markdownで作成したファイルのプレビュー機能がデフォルトで搭載されています。

Windowsであれば CtrlKV 、Macであれば ⌘K → V です。

すると、以下のように右側のペインにプレビューが表示されます。

VS CodeでMarkdownのプレビューを表示

これで、実際に文書として出力したときのイメージを確認できます。

また、この状態のままMarkdownファイルを編集すると、プレビューも連動して変更されますので、書きながらイメージを確認できますよ。

MarkdownのプレビューをGitHub風にする

ただ、先ほどのプレビュー画面、少し見づらいですよね…

そこで、より見やすいスタイリングでプレビューを見られるように、VS Codeの拡張機能「Markdown Preview Github Styling」を導入していきましょう。

拡張機能とは

拡張機能とは、インストールすることでVS Codeに機能追加をする機能です。

たくさんの拡張機能が配布されているので、自由にVS Codeをカスタマイズすることができます。

プログラミングで役立つものはもちろん、Markdownによる執筆に役立つものもありますので、このシリーズで紹介していきます。

Markdown Preview Github Stylingをインストール

では、Markdownプレビュー用の拡張機能「Markdown Preview Github Styling」を題材に、拡張機能のインストールの方法を見ていきましょう。

Markdown Preview Github Styling - Visual Studio Marketplace
Extension for Visual Studio Code - Changes VS Code's built-in markdown preview to match Github's style

手順はこうです。

  1. アクティビティバー「Extensions」をクリックして開く
  2. 上部のキーワード入力欄に「markdown preview github」などとキーワードを入力
  3. 表示された拡張機能から「Markdown Preview Github Styling」を選択
  4. 「Install」をクリック

VS Codeの拡張機能Markdown Preview Github Stylingのインストール

すぐにインストールは完了します。

Github風のMarkdownプレビューを表示

拡張機能Markdown Preview Github Stylingのタブを閉じて、再度Markdownのプレビューを表示してみましょう。

すると、以下のように白バックの見やすいプレビューになったことを確認できます。

VS CodeでGithub風のMarkdownプレビューを表示

まとめ

以上、VS CodeでMarkdownで書いた文書ファイルをプレビューする方法をお伝えしました。

VS CodeとMarkdown、そして拡張機能についてざっと確認しました。

次回は、具体的なMarkdownの書き方についてお伝えしていきます。

【ノンプログラマー向け】Markdownとは何か、またその書き方について
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてシリーズでお伝えしています。今回は、Markdownとは何か、またそれによる文書の書き方について見ていきましょう。

どうぞお楽しみに!

連載目次:ノンプロ向けVS CodeとMarkdownで書籍を執筆

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では技術同人誌の制作プロジェクトを開始しました。その執筆環境としてVisual Studio Code(VS Code)を使い、Markdown記法で書くということを前提にしていきますので、このシリーズでその準備や書き方についてお伝えしていきます。
  1. VS CodeでMarkdownで書いた文書ファイルをプレビューする方法
  2. 【ノンプログラマー向け】Markdownとは何か、またその書き方について
  3. VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One
  4. Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」
  5. Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
  6. Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount
タイトルとURLをコピーしました