VSCode で MarkDown 書き込み環境を構築する方法について話しましょう

タイポラ容疑?次の記事では、オープンソース ソフトウェアなので信頼できる VSCode で MarkDown 書き込み環境を構築する方法を紹介します。強くお勧めします！

私が最も使い慣れている MarkDown ライティング ツールは Typora です。WYSIWYG のユーザー エクスペリエンスと豊富なテーマの組み合わせにより、人々は思わず「匂いがする」と叫ばずにはいられません。良い。"

しかし、Typora 1.0 以降、充電が開始されたことは誰もが知っていますが、最近、私の Mac コンピュータにインストールされている Typora がアップグレードを促すメッセージを表示するようになりました。また、「非クズ反撃マニュアル」を整理していたら、ファイルが大きすぎてTyporaがかなり行き詰まってしまったので、悩んだ末、VS Codeを使ってMarkDwonの執筆環境を構築することにしました。

1. VS Code のインストール

言うまでもなく、VS Code のインストールは、公式 Web サイトから対応するバージョンのインストール パッケージをダウンロードしてインストールするだけで簡単です。それ。 [推奨学習:「vscode 入門チュートリアル 」]

公式 Web サイトのダウンロード アドレス: code.visualstudio.com/Download

##これは、私の Windows コンピューターにインストールされている VS Code です。中国語のプラグインがインストールされているため、トップ バーとサイドバーはすべて中国語になっていることに注意してください:

#2. MarkDown プラグインの機能強化

VS Code で MarkDown ファイルを直接開いた場合の効果を見てみましょう:

# # 右上隅で 2 列のプレビューを開くことができます:

見た目は問題ありませんが、改善の余地があり、いくつかのプラグインをインストールできます。改善する。

1. Markdown All in One

Markdown All in One は、オールインワンの MardDown 拡張プラグインです:

キーボード ショートカット、ディレクトリ、自動プレビューなど、Markdown に必要なすべての機能をサポートすると主張しています。拡張機能のページまたはウェアハウスのドキュメントを参照してください。

#https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

https://github.com/yzhang-gh/vscode-markdown/blob /master/ README.md
• 
  
• 
  

2.Markdown Image

Markdown Image は主に画像を挿入するために使用されます。 MarkDown 拡張機能に組み込んで、ローカルまたはサードパーティのイメージ ベッドまたはオブジェクト ストレージへのイメージの配置をサポートします。 このプラグインを使用すると、Typora に似たローカル イメージを直接コピーして、MarkDown に貼り付けることができます。イメージ ファイルはデフォルトでローカルに配置され、

Imgur# をサポートするように構成することもできます##、

seven Niu

、

SM.MS、Coding、その他のピクチャーベッド。 このプラグインをインストールした後、いくつかの設定を行うことができます。設定ページに入り、

markdown-image

を検索して、相対的な画像を設定できます。パス、デフォルト画像 ファイルは /res

パスに保存されます。

ショートカット キー

Shift Alt V

を使用して、コピーした画像をクリップボードからドキュメントに直接貼り付けます:

3.Markdown Preview Enhanced

Markdown Preview Enhanced は、VS Code のプレビュー機能の拡張であり、VS Code のプレビュー エクスペリエンスを向上させることができます。

このプラグインをインストールした後、プレビュー ボタンをクリックして拡張プレビューを使用します。

次のこともできます。サイドバーで表示 ディレクトリが表示されますが、ディレクトリが表示された後、インターフェイス全体が少し窮屈に見えます。

複数のプレビュー テーマも提供します:

4.Word Count CJK

Word Count CJK は、中国語の単語数をカウントするために使用されるプラグインです。

長文大好きな私にとって、記事の文字数を見るのも達成感があります。

5.MarkDown エディター

Typora の WYSIWYG エクスペリエンスだけが必要な場合はどうすればよいでしょうか?

MarkDown Editor というプラグインも見つかりました:

インストールが完了したら、Open with MarkDown Editor を選択します。 MD ファイル: MD ファイルを WYSIWYG モードで開くことができるようになりました。

他にもいくつかのプラグインがあります:

• markdownlint: markdow format check
• Markdown Preview Github Styling: GitHub テーマプレビュー

どなたでも体験できます。

3. ピクチャ ベッドの構築

MarkDown で書く場合、ピクチャ ベッドというもう 1 つの重要な要件があります。私たちが書いた記事は MD で公開される必要があります。画像はパス形式で保存されており、公開時にはローカルパスにアクセスできないため、MDエディターをピクチャーベッド機能に接続する必要があります。

以前、レイアウト ベッドを構築するために Typora PicGo Gitee を使用しましたが、その後、Gitee で問題が発生し、Typora PicGo Github に変更しました。私たちもこのアイデアに従いました。 VS Code上にレイアウトベッドを構築することです。

1.GitHub ウェアハウス構成

2.1. 新しいウェアハウスの作成

新しい GitHub ウェアハウスを作成します:

#アクセス不能を防ぐためにパブリック、必要です
• ウェアハウスにトランク ブランチが存在しないように READM ファイルを追加します

##2.2. トークンの生成

設定を入力

開発者設定の検索

新しい個人アクセス トークンを作成し、期限が切れないように時間を設定し、リポジトリのアクセス許可を付与します。

#生成されたトークンは記録する必要があり、一度だけ表示されます

2. PicGo のインストールと設定

2.1. PicGO プラグインのインストール

Search VS Code での PicGo の場合、インストール:

##2.2. PicGO の構成

##PicGo の拡張構成を開きます

アップローダーを構成し、github を選択します。

GitHub 関連の構成を使用し、私の構成 例:

• ##ブランチ: main、ブランチ
  • パス: 空、相対パスを構成することもできます

  • Custome Url: empty,
    実際には、無料の CDN である CDN アクセラレーション URL jsDeliver を構成できます。最近は利用できなくなったようです。試してみることもできます。方法使用するには:
  https://cdn.jsdelivr.net/gh/github ユーザー名/ウェアハウス名@リリースされたバージョン番号
  • ——

    cdn.jsdelivr.net/gh/fighter3…

    リポジトリ:fighter3/picgo-win、ユーザー名/ウェアハウス形式

  • トークン:以前に保存したものを入力してください

  3.

  • を使用して MD ファイルを開き、別の場所から画像を貼り付け、Ctrl Alt U を使用すると、ファイルが表示されます。正常にアップロードされ、プレビューできます

  

  画像アップロードに関連するショートカット キー:

  ##ブラウザから画像をアップロード##Windows / UnixCtrl Alt UCmd オプション UGitHub をピクチャ ベッドとして使用することは、全体的にはまだ理想的ではありません。アップロードとアクセスが安定していません。PicGo プラグでピクチャ ベッドを 7 に変更することもできます-in. Niu、Tencent Cloud、Alibaba Cloud のプロセスは一般的に似ており、比較的簡単です。

  OS	ペースト バージョンから画像をアップロード	##入力ボックスから画像をアップロード
  	Ctrl Alt E	Ctrl Alt O	OsX
  	Cmd オプション E	Cmd オプション O

  VSCode の詳細については、

  vscode チュートリアル
  をご覧ください。

以上がVSCode で MarkDown 書き込み環境を構築する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。