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

青灯夜游
リリース: 2022-07-07 20:42:33
転載
3160 人が閲覧しました

タイポラ容疑?次の記事では、オープンソース ソフトウェアなので信頼できる 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

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

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

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

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

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

# # 右上隅で 2 列のプレビューを開くことができます: VSCode で MarkDown 書き込み環境を構築する方法について話しましょう

見た目は問題ありませんが、改善の余地があり、いくつかのプラグインをインストールできます。改善する。 VSCode で MarkDown 書き込み環境を構築する方法について話しましょう

1. Markdown All in One

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

キーボード ショートカット、ディレクトリ、自動プレビューなど、Markdown に必要なすべての機能をサポートすると主張しています。拡張機能のページまたはウェアハウスのドキュメントを参照してください。 VSCode で 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 Image5-VSCode で MarkDown 書き込み環境を構築する方法について話しましょう

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

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

seven Niu

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

markdown-image

を検索して、相対的な画像を設定できます。パス、デフォルト画像 ファイルは VSCode で MarkDown 書き込み環境を構築する方法について話しましょう/res

パスに保存されます。

ショートカット キー

Shift Alt V

を使用して、コピーした画像をクリップボードからドキュメントに直接貼り付けます: VSCode で MarkDown 書き込み環境を構築する方法について話しましょう

3.Markdown Preview Enhanced

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

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

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

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

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

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

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

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

4.Word Count CJK

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

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

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

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

5.MarkDown エディター

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

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

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

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

MarkDown Editor使用

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

  • 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 ファイルを追加します

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

##2.2. トークンの生成

    設定を入力

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

    開発者設定の検索

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

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

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

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

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

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

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

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

2VSCode で MarkDown 書き込み環境を構築する方法について話しましょう##2.2. PicGO の構成

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

アップローダーを構成し、github を選択します。2VSCode で MarkDown 書き込み環境を構築する方法について話しましょう

2VSCode で MarkDown 書き込み環境を構築する方法について話しましょう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 を使用すると、ファイルが表示されます。正常にアップロードされ、プレビューできます

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

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

    ##ブラウザから画像をアップロード##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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート