noteの記事をVSCodeで書く！

note の記事を VSCode で書くとは？

このような記事を、普段使い慣れている Visual Studio Code（以下 VSCode）で書けないものかと思い、試してみてそれを記事にしました。
なお、VSCode で note の記事を書く際、markdown を使って書きます。

また結論から言うと、弊害が多く逆に手間が増える気がします。
幸先が悪いですが、どのような感じか読んでみてください。

どのような人に向けているか

• VSCode を使っている人

• note の記事を書いている人

• markdown を知っている or プログラミングなど（記号を多用すること）に抵抗がない

必要なもの

• Visual Studio Code ver1.67 以降（markdown プレビューなどに対応したため）

• ブラウザ

• note のアカウント

メリット・デメリット

メリット

• VSCode の機能が使える！

これにつきます。
拡張機能、ショートカット、、、他諸々。
文章、プログラムなど文字列を書くならどうしたって VSCode を使いたいと言う方はたくさんいらっしゃるのではないでしょうか？

• ファイル管理ができる

ディレクトリなどを駆使して、note のウェブ上ではなくローカルで管理したい方もいるはずではないでしょうか？

また、git なども使えるので、なおよし！

デメリット

• 画像の挿入など、できないことが多い

• そのできないこと補うために、最終調整の手数がかかる

このデメリットが、メリットを大きく上まる可能性あり！

note の記事を VSCode で書くには？

note の記事を VSCode を使って書くのですが、実際、記事の中身（文章）は先ほどから出てくるように markdown で書いていきます。

その markdown を駆使して、どのような流れで VSCode で note の記事を書くのか、順を追ってみてみましょう！

なお、markdown がよくわからないと言う方、もしくは詳しく知りたい方は、申し訳ないのですが調べて頂けたらなと思います。

1. markdown ファイルを作成する＋ markdow 用プレビューの表示

• ファイルの作成

記事を作成するための markdown 形式のファイルを作成します。
拡張子を「.md」にしたファイルを作成することで完了します。

• markdown 用のプレビューを表示

VSCode で作成したファイルを開くと、エディタが開きます。
そのエディタの右上のアイコンがある所（環境により位置は異なる可能性あり）に下のような小さい虫眼鏡をクリックすると、プレビューが表示されます。

または、コマンドパレットから「Markdown: Open Locked Preview to the Side」と検索し、実行すると、同じようにエディタの隣にプレビューが表示されます。

プレビューとは、Markdown 形式で書いた note の記事を、実際に表示される様な形で表示してくれるものです。
なお、プレビューで表示されるものと実際に note での表示のされかたは、厳密には違いますが、どの様な形になるか把握できますので、便利です。

2. markdown 形式で記事を VSCode で書く

ここから、Markdown を使って実際に記事を書く工程に入ります。
note の形式に沿うように、Markdown で書く方法を説明するのですが、長くなるため２つの記事に分けました。

一つ目の記事では、基本編と題し、ブラウザ上のエディタで記事を作成する際、➕ マークのメニューから選べる挿入項目一覧にあるものを Markdown での書き方を説明しています。
詳しくは、基本編の記事をぜひご覧ください。

二つ目の記事では、発展編と題し、テキストの装飾するやり方を主に説明しています。
こちらも併せて、ぜひご覧下さい。

3. markdow プレビューをコピー＋ note のブラウザ上のエディタにペースト

• markdown のプレビューをコピー

では、完成した markdown で書いた note の記事を、ブラウザ上の note のエディタに移していきます。
こちらの作業は、中々アナログと言いますか、原始的と言いますでしょうか、になっておりますが、ご了承下さい。

Markdown を編集しているエディタとそのプレビューがある状態から、編集しているエディタではなく、プレビューで表示されている全ての部分をコピーします。

• note のブラウザ上のエディタにペースト

ブラウザで note のサイトより、投稿を行いエディタを開きます。
そして、タイトル部分を避けて、本文の方にカーソルを合わせてペーストすると完了です。

4. markdow では表現できなかった箇所の追加や修正

ここが中々の弊害なのですが、上の「２. Markdown 形式で記事を VSCode で書く」の中の、Markdown での note の記事の書き方の詳細を別記事で「基本編」と「発展編」で書いているのですが、markdown では挿入できない項目（タイトル、画像、リンクの埋め込み、目次などなど）やできないこと（画像のリサイズ、テキストの中央寄せなどたど）があるため、それを補うために、今まで通り、note のブラウザ上のエディタで調整（項目の追加、項目の編集）を行う必要があります。

5. 公開

めでたくして、完成しましたら、今までの様に記事を公開してください！
お疲れ様でした！

総じて

個人的には、できないことが多く、その修正のための手間が大きいなと感じました。現時点では。

よって、markdown で表現できる note 記事の項目（見出し、引用、コード、箇条書きなど）のみを使って記事を書く方にはいいのではないかと思いました。