こんにちは,ブログカフェChromaの色でございます!
今回は,VSCodeのお話です.
VSCodeを使い始めて3か月ほどになりましたが,使ってみた感想としては…
VSCodeって何でもできるな!? って感じです.
具体的には資料作成が出来たり,PDFに出力できたり,Gitが使えたり,プレゼンが出来たりします!!
そこで,今回はVSCodeを使って資料作成~プレゼンスライド作成をする方法を紹介します!
研究室でも会社でも,作業がはかどること請け合いですよ(笑)
過去のVSCode関連の記事も併せてどうぞ↓
1つの環境で全行程をするメリット
配布資料ならワードで,スライドならパワポで作成すればいいじゃないかと考える人もいるかもしれません.
しかし,それでは作成の度に一々アプリを切り替える必要があります.
また,その手のアプリはライセンスがあり,インストールできる端末台数が制限されていることもあります.
つまり必ずしも編集したいときに編集できるとは限らないというデメリットがあるわけです.
その点今回使用するVSCodeは完全無料のエディタ なので様々な端末にインストールすることが可能!
先ほどの例のようにアプリを切り替える必要もなく時短にもなります!!
さて,環境面でのメリットを紹介したところで,いよいよ資料作成編に突入です.
Markdownで楽々資料作成
私がVSCodeを推す理由の一つに,Markdown対応であることが挙げられます.
これまでの記事でMarkdownの良さはさんざん紹介しましたが,一言でいうと
「簡単にある程度体裁の整った文書を作成できる」
というのがMarkdownのメリットです.
ちなみにこの記事の下書きもMarkdownで書いていますが,体裁を整える時間がほとんど必要ないので快適に編集できました(笑)
こんな感じで簡単に文章を書ける
少し実例を出して紹介します.
VSCode側で次のように記述してやると…
# 大見出し
## 中見出し
### 小見出し
- 箇条書き1
- 箇条書き2
**この中は太字**
プレビューでは以下のように表示されます.

体裁を整える時間を大幅に短縮できて便利です!
配布資料は「Markdown PDF」でワンクリック作成
1つMarkdownのデメリットをあげるならば,それは対応しているエディタでないとプレビューできない点でしょう.
例えばMarkdownで書いたファイルを社内に配布したとして,メモ帳などでそのファイルを開いても#や**の入った文章としか見えないわけです.
そこで無料でビューワが配布されていてほとんどの環境で開くことが出来るPDF形式に変換してしまいましょう.
VSCodeでMarkdownをPDF化するためには,「Markdown PDF」という拡張機能が必要です.
Markdown PDFのインストール
- VSCodeを開き,左端の「拡張機能」タブを開く
- 検索窓に「Markdown PDF」と入力し,検索結果から該当拡張機能のインストールボタンを押せばインストール完了!
MarkdownのPDF化方法
- VSCodeでPDF化したいMarkdownファイルを開く
ctrl + shift + P
を押してコマンドパレットを開くMarkdown PDF
と入力し,表示された候補の中からMarkdown PDF: Export(pdf)
を選択する
以上の手順をふめば,Markdownファイルと同じディレクトリにPDFファイルが出力されます.
なお,Markdown PDFはPDFの作成にchromiumを使用しており,初回使用時にchromiumをインストールするようです.
初回使用時はインターネット接続のある場所で行うのが無難でしょう.
PDFへの変換に関して,より細かい体裁を整えたい場合もあると思います.
そんな時は,MarkdownをTeX形式に変換してくれるpandocというソフトウェアを介してPDFに変換するのがおすすめです.
詳しいやり方はこちらの記事に書いているので,ぜひ参考にしてください!
プレゼンだってMarkdownで!「vscode-reveal」
社内や研究室内では何かと発表をする機会が絶えません.
となると,一々細かい体裁に気を配りたくないですよね.
そこでおすすめするのが,VSCode拡張機能の「vscode-reveal」です!
vscode-revealは,なんとMarkdown文書をそのままスライドに落とし込んでくれます!!
資料をMarkdownで作成していれば,少し手を加えるだけでスライドが完成するというシナリオ,完璧です(笑)
vscode-revealのインストール
- Markdown PDFと同様,「拡張機能」タブを開く
- 検索窓にvscode-revealと入力し,検索結果から該当拡張機能のインストールボタンを押せばインストール完了
vscode-revealでのスライドの作り方
vscode-revealでは,Markdownファイルを読み込んでスライドを作成してくれます.
基本的な記法はMarkdownですが,一部特殊なルールが存在します.
それがページ区切りです.
ページ区切りは,Markdownファイル内の区切りたい場所に---
(ハイフン3本)を挿入することで可能です.
スライドの表示とPDF化方法
- 左端のタブの赤枠で囲ったアイコンをクリックする
- 開いたスペース上部の4つ並ぶアイコンのうち
目的に応じたものをクリックする

アイコンと機能の対応は以下の通りです!


いろんなことが出来ますね(小並感)
ちなみに,スライドのプレビューをVSCode内で開くとこんな感じ!
ウィンドウの右端にスライドのプレビューが表示されており,変更はリアルタイムに反映されます!!

関係ない小話
vscode-revealはもともとはreveal.jsの機能を簡単に利用できるようにしたものらしいです.
実行の際にlocalhostの適当なポートに居座ってスライドを表示するローカルサーバを自動で立ててくれていると思います.
合っているか不安ですが(笑)
まとめ
VSCode,拡張機能との組み合わせで何でもできますね…!
さて,今回紹介した機能を簡単におさらいして,終わりにしたいと思います!
- Markdown編集とプレビューはVSCodeで
- MarkdownファイルのPDF化は「Markdown PDF」で
- Markdownのスライド化は「vscode-reveal」で

これが出来れば,仕事効率も上昇間違いなし!?
コメント