VisualStudioCodeの始め方

calendar 2025-02-21 · 6 分で読了 · vsc markdown

VisualStudio Code+MarkDownでレポート、スライドをさくっと作成

1. はじめに

ここは章、ここは箇条書き、太字、などをテキスト上で指示しながら サクッと、文書を書いてレポート提出したりスライド作成する方法の紹介。

文書推敲に集中できます。

Markdownと呼ばれる形式で文書を作成します。

有料/無料のいろいろな組み合わせがありますが、ここではすべて無料の Visual Studio Codeとその拡張機能(プラグインソフト)を用いた変換を紹介します。

2. VisualStudioCode をインストールする

テキストを入力するエディタは何でもいいのですが、html,pdf,スライド形式 などに変換出力することが必要なので、そのオプションを無料で使えるVScodeを使います。

他の方法としてはEmacsを使う方式があります。

マークダウンの命令(方言)に注意

とっても便利なマークダウンなので、様々な変換ソフト(変換機能アプリ) が乱立し、正式な文法が定まっていません。 たとえば、「引用」ができたりできなかったりします。

3. VScodeの起動

VScodeの設定を変更する

net接続必須(Configのメニューにinstall可能言語表示されない)

NETに接続していないとメニューが現れないので、注意

日本語メニューにする

View -> Command Palette -> Configure display language -> 日本語

  1. ViewからCommand Paletetを選択

  1. Configure Lnguageを選択

  1. 日本語を選択

  1. 再起動していいか尋ねられているので、Restart(ok)とする

見栄えの変更

ファイル -> ユーザー設定テーマ -> 配色テーマ

File -> Preference -> Theme -> Color Theme

背景がお好みでない人は以下で変更できます。

  1. FileからPreference,Theme,Color Themeを選択

  1. お好みのテーマを選んでクリック

5. 拡張機能をインストール

Markup形式で書かれた文書をhtml,pdf,スライド形式に変換するために 以下の拡張機能をインストールします。

なお、PCをNetworkに接続しないと候補が メニューで現れないので、注意!

  • Markdown PDF
  • Marp for VS Code

markdown all in oneのインストールもよく紹介されていますが、 入力支援に用いるものなので、ここでは割愛します。

PDF変換機能: Markdown PDF をinstall

  1. 拡張機能ボタンを押す

  1. 検索画面にmarkdownと入力すると、該当するものが表示される。

  1. Markdown PDFをクリックしてインストール

  1. trust画面が表示されたら、信用するので、Trust & Install

Slide出力機能: Marp for VS Codeをinstall

  1. 検索画面にmarpと入力して、現れた、 Marp for VS Codeをクリックして、インストール

MARPをinstallしたら、環境変数を有効にするために、PCを再起動してください

TRUSTがでてもokにする

作業場所(フォルダ)がwindowsがわからない場所だと、以下のダイアログがでます。

windowsが管理している場所だと 勝手にファイルを弄ぶことがあるので、 私は管理が及ばない場所で作業しています。 とりあえず、okにしておきます。

文書を書く

マークアップ形式で文書を書きます。

マークダウンの書式は別ページを参考してください。

改行や空白行が半角空白などが大きな意味をもつので、慣れるまで注意してく ださい。

  1. File -> New Text Fileを選択

  1. 入力画面になったので、適当に作成してください。

  1. 以下を適当に入力しました。
1# はじめに
2## 本日は晴天なり
3
4- 今日は晴れた
5- 明日ははれるかな?
6
7### あああ

シャープ記号やハイフンはmarkdownの書式です。

記号+半角スペース(半角空白文字)が必ず必要です。

文書を保存

  1. 文書を保存します。

File -> save

  1. 保存ダイアログ画面が開きます。

ファイル名に、文書の1行目が入っています。 (MSのお節介のせいです)

また、ファイルの種類がMarkdownとなり、ファイル拡張子がmdとなっています。

ファイル名に日本語、空白文字、記号などがあると、unHappyになることがある ので、英文字名に変更します。

  1. start1.mdと変更しました。

必ず拡張子をmdにしてください!!

お節介焼きのMSは、拡張子をmd(markdown)にしないと、働いてくれません!!
ファイルの種類もMarkdownにしてください。

html形式で表示

htmlに変換して表示させます。

  1. 右上にある、Open Previewのアイコンを押します

  1. 画面が分割され、右画面に、htmlの形式で表示されました。

  1. 左画面で、編集を続けると、自動的に右画面に反映されていきます。

pdf形式で保存

  1. pdf形式でファイル保存するときは、画面上で右クリックを押して、 コンテキストメニューを出し、Markdown PDF: Export(pdf)を選択します。

2.左下に、保存場所が表示されています。htmlも同様です

  1. pdf文書が表示されます。

ファイルがあることがわかります。

スライド形式で出力する

marpを使います。

  1. 文頭(frontmatterといいます)にスライドにするための以下の5行のおまじないを書きます。
1---
2marp: true
3theme: gaia
4size: 16:9
5---
  • ハイフンは3つ必要です。
  • :の後の半角スペースが必要
  • theme:の行はないと、背景が白になります。
  • size:は縦横比です。

すると、右画面が以下のように変化します。

環境変数を有効にすることが必要なので、 marpインストール後再起動していない場合は、再起動してください。

スライドをファイル出力保存します。

  1. Marpのアイコンをクリックします

  1. Export Slide Deckを選択します。

  1. スライドとしての保存名を入力します。先程pdfファイルを保存したので、別名にしま す。

  1. 保存結果が表示されました

保存場所にもファイルがあります

  1. 新しいスライドに書くときは、ハイフン3つで区切ります。

  1. 新しいスライドが表示されています。

画像も自由に取り込むことができます。

marpのおまじない:front matter

スライドにはページ番号をつけましょう!

また、背景色を変更したいときは以下

  • ページ番号を付加する: pagenate: true
  • 背景色を変更する: backgroundColor: #f9f8cb
1---
2marp: true
3#theme: gaia
4size: 16:9
5pagenate: true
6backgroundColor: #fff8e1
7---

作業を簡略化して結果を早く提示する方法を紹介しました。

簡単にさくっと文書を書いてレポートやスライドにすることが目的なので、 書式を重んじる場合はそれなりの方法で作成してください。

今回はVScodeとその拡張機能を用いたmarkdownを紹介しました。 変換機能により、Markdownの書式(方言)が乱立していますので、 注意して使用してください。