Lassen Sie uns darüber sprechen, wie Sie eine MarkDown-Schreibumgebung in VSCode erstellen

Typora-Gebühren? Im folgenden Artikel erfahren Sie, wie Sie eine MarkDown-Schreibumgebung in VSCode erstellen. Es handelt sich um eine Open-Source-Software und ist absolut vertrauenswürdig! Sehr empfehlenswert!

Das MarkDown-Schreibtool, das ich am häufigsten verwende, ist Typora. Die WYSIWYG-Benutzererfahrung, gepaart mit den reichhaltigen Themen, lässt die Leute nicht anders, als „wirklich lecker“ zu sagen.

Aber jeder weiß, dass es nach Typora 1.0 zu laden begann. Vor kurzem forderte mich das auf meinem Mac-Computer installierte Typora auf, ein Upgrade durchzuführen. Als ich außerdem mein „Non-Scum Counterattack Manual“ sortierte, blieb Typora sehr hängen, weil die Datei zu groß war. Deshalb entschied ich mich nach langem Überlegen, VS Code zu verwenden, um eine MarkDwon-Schreibumgebung zu erstellen.

1. VS-Code-Installation

Selbstverständlich müssen Sie bei der Installation von VS-Code einfach die entsprechende Version des Installationspakets von der offiziellen Website herunterladen und installieren. [Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

Offizielle Website-Download-Adresse: code.visualstudio.com/Download

Dies ist VS Code, der auf meinem Windows-Computer installiert ist. Passen Sie auf, mein Top Die Spalten und Seitenleisten sind alle auf Chinesisch, da das chinesische Plug-in installiert ist:

2. MarkDown-Plug-in-Erweiterung

Werfen wir einen Blick auf die Auswirkung des direkten Öffnens der MarkDown-Datei mit VS-Code:

In der oberen rechten Ecke können Sie eine zweispaltige Vorschau öffnen:

Es sieht in Ordnung aus, aber es gibt Raum für Verbesserungen, und wir können einige Plug-Ins installieren, um es besser zu machen.

1. Markdown All in One

Markdown All in One ist ein All-in-One-Erweiterungs-Plug-in für MardDown:

Es soll alle von Markdown benötigten Funktionen unterstützen, einschließlich Tastaturkürzel und Verzeichnisse , automatisch Für eine Vorschau usw. können Sie einen Blick auf die Erweiterungsseite oder die Warehouse-Dokumentation werfen:

• 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 ist hauptsächlich eine Erweiterung zum Einfügen von Bildern in MarkDown. Unterstützung der Platzierung von Bildern im lokalen Bildbett oder im Objektspeicher eines Drittanbieters.

Mit diesem Plug-in können Sie lokale Bilder ähnlich wie bei Typora direkt kopieren und dann in MarkDown einfügen. Die Bilddateien werden standardmäßig lokal platziert und können auch so konfiguriert werden, dass sie Imgur unterstützen. Qiniu code>, SM.MS, Coding usw. Imgur，七牛，SM.MS，Coding 等图床。

安装完这个插件之后，可以做一些配置，进配置页，搜索：markdown-image，可以配置一下相对路径，默认图片文件保存在/res路径下。

使用快捷键Shift+Alt+V

Installation Nachdem Sie dieses Plug-in fertiggestellt haben, können Sie die Konfigurationsseite aufrufen und nach Folgendem suchen: markdown-image. Sie können den relativen Pfad konfigurieren >/res Pfad.

Verwenden Mit der Tastenkombination Umschalt+Alt+V können Sie das kopierte Bild direkt aus der Zwischenablage in das Dokument einfügen:

3. Markdown Preview Enhanced ist eine VS-Erweiterung Die Verwendung der Codevorschaufunktion kann das Vorschauerlebnis von VS Code verbessern.

Nach der Installation dieses Plug-Ins klicken Sie auf die Vorschau-Schaltfläche, um die erweiterte Vorschau zu verwenden:

Sie können das Verzeichnis auch in der Seitenleiste anzeigen, aber wenn das Verzeichnis angezeigt wird, sieht die gesamte Benutzeroberfläche etwas eng aus .

🎜🎜🎜Es bietet auch mehrere Vorschauthemen: 🎜4. Word Count CJK des Artikels: Es ist auch ein volles Erfolgserlebnis.

5. MarkDown-Editor

Was wäre, wenn wir nur das WYSIWYG-Erlebnis in Typora wollen?

Ich habe auch einen Plug-in-MarkDown-Editor gefunden:

Wählen Sie nach Abschluss der Installation Mit MarkDown-Editor öffnen für die MD-Datei aus, um die MD-Datei WYSIWYG zu öffnen.

Es gibt noch einige andere Plug-Ins:

markdownlint: Markdow-Formatprüfung

Markdown Preview Github Styling : Vorschau des GitHub-Themas

Sie können es auch ausprobieren.

3. Bildbettkonstruktion Open with MarkDown Editor就可以所见即所得地打开MD文件了。



还有一些其它的插件：

• markdownlint：markdow格式检查
• Markdown Preview Github Styling：GitHub主题预览

大家也可以去体验一下。

三、图床搭建

使用MarkDown写作，还有一个重要的需求，就是图床，我们写的文章是要发布出去的，MD中的图片是以路径形式保存，本地的路径发布出去可没法访问，所以我们需要给MD编辑器接入图床的功能。

我之前用Typora+PicGo+Gitee搭建了一版图床，后来Gitee出了那档子事，又换成了Typora+PicGo+Github，我们也照这个思路，在VS Code上搭建一版图床。

1.GitHub仓库配置

2.1. 创建一个新的仓库

创建一个新的GitHub仓库：

• 公开，必须的，防止访问不到
• 添加一个READM文件，防止仓库没有主干分支



2.2. 生成token

• 进入settings



• 找到developer settings



• 创建新的Personal access tokens，时间设置为永不过期，给repo权限就可以了



• 生成的Token要记下来，只显示一次



2. 安装配置PicGo

2.1.安装PicGO插件

在VS Code里搜索PicGo，安装：



2.2.配置PicGO

• 打开PicGo的扩展配置



• 配置uploader，选择github



• GitHub相关配置，以我的配置为例：

  • Branch：main，分支

  • Path：空，也可以配置一个相对路径

  • Custome Url：空，

    其实可以配置一个CDN加速的url，jsDeliver，它是一个免费的CDN，最近似乎不可用了，大家也可以试一下，它的使用方法：https://cdn.jsdelivr.net/gh/你的github用户名/你的仓库名@发布的版本号Beim Schreiben mit MarkDown gibt es eine weitere wichtige Anforderung, nämlich das Bildbett, das wir schreiben. Bilder in MD werden in Form von Pfaden gespeichert, wenn sie veröffentlicht werden. Daher müssen wir den MD-Editor mit der Bildbettfunktion verbinden.

    Früher habe ich ein Layoutbett mit Typora+PicGo+Gitee erstellt. Dann ist etwas mit Gitee passiert und ich habe es in Typora+PicGo+Github geändert Idee, ein Layoutbett auf VS Code zu erstellen.
  • 1.GitHub-Warehouse-Konfiguration

  2.1. Erstellen Sie ein neues Warehouse

  • Erstellen Sie einen neuen GitHub Repository:
  Öffentlich, notwendig, um Unzugänglichkeit zu verhindern
Fügen Sie eine READM-Datei hinzu, um zu verhindern, dass das Repository keinen Stammzweig hat



🎜2.2. Token generieren🎜

🎜🎜Einstellungen eingeben🎜🎜🎜🎜🎜
🎜🎜Entwicklereinstellungen finden🎜🎜🎜🎜🎜
🎜🎜Das generierte Token muss geschrieben werden herunter und zeige es nur einmal🎜🎜🎜🎜🎜

🎜2. PicGo installieren und konfigurieren🎜🎜

🎜2.1. PicGO-Plug-in installieren🎜 h4>🎜 PicGo im VS-Code durchsuchen und installieren: 🎜🎜🎜

🎜2.2. PicGO konfigurieren🎜

🎜Erweiterte Konfiguration von PicGo öffnen🎜🎜🎜🎜
🎜Uploader konfigurieren und Github auswählen🎜🎜🎜 🎜
🎜 🎜 GitHub-bezogene Konfiguration, nehmen Sie meine Konfiguration als Beispiel: 🎜
🎜🎜Zweig: Hauptzweig, Zweig 🎜🎜🎜🎜Pfad: leer, Sie können auch einen relativen Pfad konfigurieren 🎜🎜🎜🎜Benutzerdefinierte URL: leer, 🎜🎜 kann Tatsächlich muss eine CDN-beschleunigte URL konfiguriert werden, jsDeliver, es ist ein kostenloses CDN, es scheint in letzter Zeit nicht verfügbar zu sein, Sie können es auch ausprobieren, wie man es verwendet: https://cdn.jsdelivr.net/gh/your Github-Benutzername/Ihr Warehouse-Name@veröffentlichte Versionsnummer——🎜cdn.jsdelivr.net/gh/fighter3…🎜🎜🎜🎜🎜Repo: fighter3/picgo-win, Benutzername/Warehouse-Format🎜🎜🎜 🎜Token: Füllen Sie einfach das aus, was Sie zuvor gespeichert haben🎜🎜🎜🎜🎜🎜🎜🎜

3. Öffnen Sie die MD-Datei mit

• , fügen Sie ein Bild von einer anderen Stelle ein, verwenden Sie Ctrl + Alt + U，可以看到文件成功上传，并且可以预览



图片上传相关的快捷键：

OS	从粘贴版上传图片	从浏览器上传图片	从输入框上传图片
Windows/Unix	Ctrl + Alt + U	Ctrl + Alt + E	Ctrl + Alt + O
OsX	Cmd + Opt + U	Cmd + Opt + E	Cmd + Opt + O

Die Verwendung von GitHub als Bildbett ist insgesamt immer noch nicht ideal und das Hochladen und Zugreifen ist nicht stabil. Das können wir Ändern Sie auch das Bildbett im PicGo-Plugin in Qiniu, Tencent Cloud oder Alibaba Cloud. Der Vorgang ist im Allgemeinen ähnlich und relativ einfach.


Weitere Informationen zu VSCode finden Sie unter: vscode-Tutorial!

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie eine MarkDown-Schreibumgebung in VSCode erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!