見出し画像

markdownを活用してテキストを迅速に公開する:markdownエディタとしてのVScode

今回は、WindowsマシンにVScodeをインストールし、markdownをベースにした日記作成という観点から、その使い方や有用性についてみていきたいと思います。


VScodeとは今最も評判の高いフリーのエディタソフトである

VScode (Viusual Studio Code) は、ここ数年で急速に普及してきたエディタソフトです。ソフトウェア開発者から大きな支持を受けていますが、HTMLエディタ・markdownエディタとしても非常に優秀で、文章作成に関わるあらゆる人々にとって有用と言えるソフトです。

VScodeがどういうソフトでどのようにインストールすればよいかについては、既にたくさんの入門書が公開されています。詳細についてはそれらを見てください。

VScodeは「拡張機能」を導入することでさらに「使える」ソフトになる

拡張機能とは

VScodeの重要な特徴の一つが「拡張機能」です。拡張機能をインストールすることで、VScodeを自分の作業内容に合わせてカスタマイズし、更に便利なツールに仕立てることができます。

拡張機能の導入は簡単です。エディタを開き、左端のメニュー内に存在する拡張機能アイコンをクリックすると、インストール済み拡張機能やオススメ拡張機能の一覧が現れます。

一番上の検索窓にキーワードを入力することにより、自分の仕事に役立ちそうな拡張機能を検索することもできます。
これはという拡張機能が見つかったら、インストールボタンをクリックするだけです。

markdown対応機能を強化する拡張機能"Typora"

拡張機能のTyporaをインストールすると、Markdownファイルを編集しながらリアルタイムでプレビューできます。また、PDFやHTMLへの変換がボタンクリック一発で出来たりします。

Typoraについては、以下の解説ページも分かりやすいです。

実践してみる

ではメモ帳に代えてVScodeで日記を書いてみましょう。

新しいファイルを作るには

まずプルダウンメニューから「ファイル」を選ぶのですが、ここでVScodeがちょっと独特なのは、「ファイル新規作成」と「テキストファイル新規作成」の2つの選択肢が存在することです。「テキストファイル」を選びたくなるかもしれませんが、ここは「ファイル新規作成」の方を選択します。

すると、画面の上の方に入力窓が出現し、これから作るファイルの名前を決めることになります。ここで、ファイル名の末尾(拡張子)を必ず`.md`にしてください。こうすることによって、これから作るのが他の何者でもなくmarkdownのファイルだということをVScodeに知らしめることができます。
ここでは、`d20240506.md`としましょう。

Typoraがインストールされていると、デフォルトでmarkdown用のアイコンなどがたくさん並んだ編集画面が出てくるはずです。見出しなどを入力するとそれらしく大きめのフォントで表示され、HTMLとして公開されたらこう見えるだろうというイメージ近い表示になります(この画面をプレビューモードと呼ぶことにします)。いわゆるWYSIWYGですね。

こちらのほうがわかりやすそうに見えるかもしれませんが、まず敢えてもう一つの編集モード(テキスト編集モード)に移動しましょう。

画面上部の中央にあるVScodeのアイコン(青いリボンみたいなやつ。カーソルを合わせると"Edit in VSCode"と表示される)をクリックすると、何やらシンプルな画面に遷移します。

ここにmarkdown形式でテキストを書き込んでいきます。見出しや箇条書きなどでは適切に色分けがなされた表示になるはずです。

私としてはこちらの編集モード画面をメインとして作業することをおすすめしますが、どうしても嫌な人はタブをクリックしてプレビューモードの方に移動してください。画面をよくみると、同じファイルのタブがもう一つ別に存在していることがわかるでしょう。一方がプレビューモード、もう一方がテキスト編集モードです。同じファイルを開いているのでどちらで編集を試みても両方の表示内容が同時に変化します。

このリッチGUIな方のタブにはもう一つ特徴があります。編集画面上でマウスの右ボタンをクリックするとメニューが現れ、ここから当該markdownの内容をHTMLやPDFファイルとして簡単に保存できるのです。これらのファイルは元のmarkdownと同じフォルダにセーブされます。

このように、markdownファイルの編集とアウトプットは簡単にできるわけです。

次は……

ブラウザ(Google Chrome)に拡張機能を組み合わせ、さらにmarkdownを便利に編集する体制を作ってみましょう。
作成したmarkdownファイルをどう活用していけるかも論じていきたいと思います。

この記事が気に入ったらサポートをしてみませんか?