VSCode を究極の Markdown エディターに変える方法

Web 用に作成する場合は、Markdown を検討することをお勧めします。 Web ライター向けの Markdown アプリはたくさんあります。しかし、Microsoft の Visual Studio Code (VSCode) のような無料のコード エディターはさらに強力です。

VSCode は Markdown を理解し、HTML でプレビューするための組み込みツールを備えています。ただし、ワード カウントやスペル チェッカーなどのワード プロセッサ機能を追加することはできます。プレビューアの Web サイト固有のカスタマイズを有効にすることもできます。

---

---

今日のメイク動画

最後に、Markdown を HTML としてコピーして、コンテンツ管理システム (CMS) にきれいに貼り付けることができる機能は必須です。

VSCode をダウンロードしてインストールする

まず、VSCode またはそのオープン ソースの代替 VSCodium をダウンロードします。それぞれのバージョンは、すべての主要なデスクトップ オペレーティング システムで利用できます。

終わったら VSCodeをダウンロードしてインストール 、アプリケーションを実行して開始します。

単語カウント拡張機能をインストールする

単語カウンターを追加することから始めます。これを処理する多くの拡張機能が利用可能です。実際の単語とコードまたはファイル名を最もよく区別するのは、Microsoft 独自の Word Counter 拡張機能です。

ダウンロード： 文字数 VSCode 拡張機能 (無料)

---

---

1. クリック 拡張機能をダウンロード 下 資力 右下のペインにあります。
2. ダウンロードしたら、VSCode に切り替えます。
3. クリックしてください 歯車のアイコン インターフェイスの左下隅にあります。
4. クリック 拡張機能 .
5. 省略記号 ( ... ) [拡張機能] ペインの上部近くにあります。
6. クリック VSIX からインストールする .
7. を選択 ms-vscode.wordcount-*.vsix ダウンロードしたばかりのファイル。

の 文字数 拡張機能がインストールされます。新しい Markdown ファイルを開いて入力してテストします。インターフェイスの左下に単語カウンターが表示されます。

スペル チェック拡張機能をインストールする

また、スペル チェック機能を追加することもできます。単語カウンターと同様に、スペル チェックを処理する多くの拡張機能があります。最も人気があるのは コードスペルチェック 多くの言語で利用できるため、Street Side Software が提供しています。

---

---

ダウンロード： コードスペルチェック VSCode 拡張機能 (無料)

1. 上記のセクションの手順 1 ～ 6 に従います。
2. を選択 streetsidesoftware.code-spell-checker-*.vsix ダウンロードしたばかりのファイル。

の コードスペルチェック 拡張機能がインストールされます。新しい Markdown ファイルを開き、スペルミスのある単語を入力してテストします。

これらの単語の下に青い波線が表示され、インターフェイスの右下にエラーの数が表示されます。

エラーの波線をカスタマイズする

このスペル チェック拡張機能の最大の問題は、エラーを識別する波線に使用される弱い青色です。暗いテーマの背景に溶け込む傾向があり、他の Markdown 要素に再利用されます。

なぜ私のOKグーグルが機能しないのですか

ワード プロセッサで見られるように、大胆な赤色に変更してみてください。

1. クリックしてください 歯車のアイコン インターフェイスの左下隅にあります。
2. クリック 設定 .
3. クリック ワークベンチ 、 それから 外観 .
4. 下にスクロールして 色のカスタマイズ :
5. クリック settings.json で編集 .
6. 新しいタブで開くエディターに次のコードを貼り付けます:

   "editorInfo.foreground": "#ff0000"

   
7. ファイルを保存します。

単語のつづりを間違えると、VSCode はその単語を真っ赤な波線で飾ります。

誤検知を無視する

スペル チェッカーは、特定の業界固有の用語や会社名などの固有名詞を認識しない場合があります。たとえば、上のスクリーンショットでは、VSCode は略語「distro」をスペルミスとして強調表示しています。

これらの単語がエラーとして表示されないようにするには、それらを ユーザー設定 .

1. スペル チェッカーで無視する単語を右クリックします。
2. 覆いかぶさる つづり そして選択 ユーザー設定に単語を追加する .

今後は、スペル チェックでこれらの単語が正しくないと識別されなくなります。

Copy Markdown を HTML 拡張としてインストールする

次に、Copy Markdown as HTML 拡張機能をインストールして、フォーマットされた Markdown をコピー & ペーストできるようにします。

ダウンロード： マークダウンを HTML としてコピー VSCode 拡張機能 (無料)

1. 上記のセクションの手順 1 ～ 6 に従います。
2. を選択 jerriepelser.copy-markdown-as-html-1.1.0.vsix ダウンロードしたばかりのファイル。

これで、VSCode から Markdown をコピーして、クリーンな HTML として CMS に貼り付けることができるはずです。これをテストするには:

1. Markdown テキストを選択します。
2. 開く コマンドパレット の中に 意見 メニュー、または CTRL+Shift+P .
3. 選ぶ マークダウン: HTML としてコピー :
4. コピーした Markdown を新しい HTML ファイルに貼り付けます。

コピーされた Markdown が HTML として適切に貼り付けられたことがわかります。

プレビュー ペインのカスタマイズ

デフォルトでは、プレビュー ペインは現在の VSCode テーマと同じスタイルになります。

ただし、コンテンツの最終的な目的地をより正確に反映するプレビューが必要になる場合があります。プレビュー ペインをカスタマイズして、発行先の Web サイトに Markdown が既に存在するように見せることができます。

任意の Web サイトを使用できます。次のスタイルは MUO から取得されました。ただ ブラウザの要素検査ツールを使用してフォントを見つけます と 任意の Web サイトから色を選ぶ .

1. 新しいファイルを作成し、「 CustomStyles.css '
2. 次のサンプル CSS コードをファイルに貼り付けます:

   body { 
     background-color: #fff; 
     color: #2c2c2c; 
     font-family: Roboto; 
     font-size: 18px; 
     font-weight: 400; 
     line-height: 1.7em; 
     max-width: 750px; 
   } 
     
   h1 { 
     font-size: 38px; 
     font-weight: 800; 
   } 
     
   h2 { 
     font-size: 34px; 
     font-weight: 700; 
   } 
     
   h3 { 
     font-size: 24px; 
     font-weight: 700; 
   } 
     
   a { 
     border-bottom: 2px solid #bf0d0b; 
     color: #bf0d0b; 
     font-weight: 700; 
   } 
     
   a:hover { 
     color: #fff; 
     background: #bf0d0b; 
   } 
     
   strong { 
     font-weight: bold; 
   }

3. ファイルを保存します。
4. クリックしてください 歯車のアイコン インターフェイスの左下隅にあります。
5. クリック 設定 .
6. クリック 拡張機能 その後 マークダウン .
7. 下にスクロールして マークダウン: スタイル そしてクリック アイテムを追加 .
8. あなたのパスを入力してください CustomStyles.css ファイル、例:

   C:\Users\Adam\CustomStyles.css

   
9. クリック わかった .

これらを作成したら、この記事によく似たプレビュー ペインが表示されるはずです。

繰り返しますが、これらの値は MUO でブラウザーの Inspect Element ツールを使用して取得しましたが、独自の宛先 Web サイトの値を見つける必要があります。

エディターのテーマ

デフォルトの VSCode テーマには、ダークとライトの両方があり、それぞれにハイ コントラスト バージョンがあります。しかし、他の優れたコード エディターと同様に、 大量の優れたサードパーティのテーマが利用可能 .

コード エディターよりもワープロの外観を好む場合は、huacat の Office テーマをお勧めします。

コード エディターを好む場合は、Dracula、Gruvbox、Material (下のスクリーンショットを参照)、および Nord などの一般的なテーマはすべて、拡張機能マーケットプレースから入手できます。

新しいテーマをインストールするには:

1. クリックしてください 歯車のアイコン インターフェイスの左下隅にあります。
2. クリック 拡張機能 .
3. 上記のテーマのいずれかを検索するか、単にカテゴリをフィルタリングして テーマ 利用可能なものをブラウズします。

VSCode は究極の Markdown エディターですか?

では、VSCode は Web コンテンツ用の究極の Markdown エディターなのでしょうか?すぐに使える、おそらくそうではありません。しかし、それは可能な限り拡張可能です。

ワード カウンター、スペル チェッカー、Markdown を HTML としてコピー、プレビューのカスタマイズ、およびテーマは表面をなぞっただけです。 VSCode で利用できる拡張機能が満載のエコシステムがあり、自由に独自のものを作成できます。