作者:contr4l_
VsCode の概要 #
VsCode は MicroSoft がリリースしたテキストエディタであり、その機能の無料性、豊富なプラグインサポート、高いカスタマイズ性などの特徴から、新世代のプログラマーの間で最も好まれるテキストエディタの一つになっています。(競合するものには、学習曲線が急な VIM、ライセンスの問題を抱える Sublime Text、UI のインターフェースが比較的に現代的でない Eclipse や NotePad++ などがあります)
Markdown の概要 #
Markdown 自体は一種の文法ルールであり、特定のフォーマットでテキストを入力すると、強力なレンダリングエンジンがそれを期待する表示効果に変換することができます。例えば、太字、下線、引用、セクションの段落レベル、ハイパーリンク、コードブロックなどです。
これは従来のオフィス操作と比較して、テキスト作業者にとって最大の助けとなります。それは、作業者がコンテンツに集中し、フォーマットではなく、編集プロセスでのマウスの使用頻度を大幅に減らすことができるからです。
このチュートリアルでは、Markdown の構文をサポートする、リアルタイムプレビューを提供するテキストエディタが必要なので、VsCode に Markdown プラグインをインストールすることを前提としています。
VsCode のインストール #
ダウンロードリンク、Windows/Linux/MacOS に対応しています
ダブルクリックして実行すると、以下のウィンドウが表示されます(通常、UI をローカライズしないことをお勧めします)
よく使われるショートカットキー:
- Ctrl+N:新規ファイル作成
- Ctrl+S:ファイルを保存
- Ctrl+Shift+P:機能選択に入る
- Ctrl+P:ファイル選択に入る
- Ctrl+B:サイドバーの開閉
- Ctrl+F:テキスト内検索
- Ctrl+Shift+F:グローバル検索
プラグインのインストール #
VsCode では、プラグイン(Extension)は最も重要な機能の一つであり、プラグアンドプレイの方式で、普通のテキストエディタに多くの追加機能を提供します。特定の目的を持つ作業者にとって、効率の向上を大いに提供することができます。また、興味のある開発者は自分自身のプラグインを作成し、Market に公開することができます。ほとんどはオープンソースで無料の機能であり、一部は追加の有料機能(コード補完ツール Tabnine など)を提供する場合もあります。
VsCode のインターフェースで、Ctrl+Shift+X
を押すと、プラグインの画面に入ります。以下の画像のように、INSTALLED セクションには現在インストールされているプラグインが表示されます。
上部の検索ボックスに「Markdown」と入力し、Enter キーを押すと、現在のプラグインマーケットにある Markdown 関連のプラグインを検索することができます。私たちはMarkdown All in One
を選択して、Install をクリックしてインストールを実行します。(私はすでにインストールが完了しているため、ここでは Uninstall と表示されています😄)
Markdown のリアルタイムプレビュー #
まず、Ctrl+N
を押して新しいドキュメントを作成し、Example.md という名前で保存します(VsCode はファイルの拡張子に基づいて、現在のファイルの内容をどのような構文でハイライトするかを判断します)
Markdown の構文に従って、以下のテキストを入力します:
# 一级标题
## 二级标题
ここに内容が入ります
`ここにインラインコードが入ります`
**太字の効果**
~~取り消し線の効果~~
> 引用形式の内容
次に、Ctrl+Shift+P
を押すと、機能選択ボックスが表示されます:
Preview
と入力し、Markdown: Open Preview to the Side
を選択します。
ここで私の判断が誤っています。VsCode は Markdown をネイティブにサポートしているため、プラグインをインストールする必要はありませんが、プラグインの機能は特に紹介する価値があります。
以下のような効果が得られます。
その後、左側のボックスで内容を自由に編集することができ、実際のレンダリング効果は右側に同期して表示されます。
その他の形式のエクスポート #
右側の表示効果と同様のファイル(例:pdf)を取得したい場合は、以下の画像のようなプラグインをインストールし、同様にCtrl+Shift+P
を使用して関連する機能を検索してエクスポートします。
これにより、以下のようなファイルが得られます。
その他 #
VsCode と Markdown には、LaTeX のサポート、手動での数式入力、HTML 構文との連携など、さまざまなプレイ方法があります。興味のある方は、さらに知識を検索して学習を続けることができます。