Parlons de la façon de créer un environnement d'écriture MarkDown dans VSCode

Frais Typora ? L'article suivant vous présentera comment créer un environnement d'écriture MarkDown dans VSCode C'est un logiciel open source et totalement digne de confiance ! Fortement recommandé!

L'outil d'écriture MarkDown que j'ai le plus l'habitude d'utiliser est Typora. L'expérience utilisateur WYSIWYG, associée aux thèmes riches, rend les gens incapables de s'empêcher de dire "vraiment délicieux".

Mais tout le monde sait qu'après Typora 1.0, il a commencé à se charger. Récemment, le Typora installé sur mon ordinateur Mac a commencé à me demander de mettre à niveau. De plus, lorsque je triais mon "Manuel de contre-attaque sans écume", Typora était très bloqué car le fichier était trop volumineux. Ainsi, après mûre réflexion, j'ai décidé d'utiliser VS Code pour créer un environnement d'écriture MarkDwon.

1. Installation de VS Code

Inutile de dire que pour l'installation de VS Code, il suffit de télécharger la version correspondante du package d'installation sur le site officiel et de l'installer. [Apprentissage recommandé : "Tutoriel d'introduction à vscode"]

Adresse de téléchargement du site officiel : code.visualstudio.com/Download

Ceci est VS Code installé sur mon ordinateur Windows Faites attention, mon top Les colonnes. et les barres latérales sont toutes en chinois car le plug-in chinois est installé :

2. Amélioration du plug-in MarkDown

Jetons un coup d'œil à l'effet de l'ouverture du fichier MarkDown directement avec VS Code :

Vous pouvez ouvrir un aperçu en double colonne dans le coin supérieur droit :

Ça a l'air bien, mais il y a place à l'amélioration, et nous pouvons installer des plug-ins pour l'améliorer.

1. Markdown All in One

Markdown All in One est un plug-in d'amélioration MardDown tout-en-un :

Il prétend prendre en charge toutes les fonctions requises par Markdown, y compris les raccourcis clavier et les répertoires. , automatique Pour un aperçu, etc., vous pouvez consulter sa page d'extension ou la documentation de l'entrepôt :

• 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 est principalement une extension pour insérer des images dans MarkDown, prenant en charge le placement d'images dans un lit d'images ou un stockage d'objets local ou tiers.

En utilisant ce plug-in, vous pouvez directement copier des images locales similaires à Typora, puis les coller dans MarkDown. Les fichiers image sont placés localement par défaut et peuvent également être configurés pour prendre en charge Imgur, Qiniu code>, SM.MS, Codage, etc. Imgur，七牛，SM.MS，Coding 等图床。

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

使用快捷键Shift+Alt+V

Installation Après avoir terminé ce plug-in, vous pouvez effectuer certaines configurations. Accédez à la page de configuration et recherchez : markdown-image. Vous pouvez configurer le chemin relatif. Le fichier image par défaut est enregistré dans le /res. </code.></p> <h3 data-id="heading-4"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/871/174/601/1657110126161060.png" class="lazy" title="165711011261467Parlons de la façon de créer un environnement décriture MarkDown dans VSCode" alt="Parlons de la façon de créer un environnement décriture MarkDown dans VSCode"><strong></strong>Utiliser La touche de raccourci <code>Shift+Alt+V permet de coller directement l'image copiée du presse-papiers dans le document :

3 Markdown Preview Enhanced

Markdown Preview Enhanced est un VS L'amélioration. de la fonction d'aperçu du code peut améliorer l'expérience d'aperçu de VS Code.

Après avoir installé ce plug-in, cliquez sur le bouton d'aperçu pour utiliser l'aperçu amélioré :

🎜Vous pouvez également afficher le répertoire dans la barre latérale, mais avec le répertoire affiché, toute l'interface semble un peu à l'étroit . 🎜🎜🎜🎜🎜Il propose également plusieurs thèmes d'aperçu : 🎜

4.Word Count CJK

Word Count CJK est un plug-in utilisé pour compter le nombre de mots chinois :

Pour les gens comme moi qui aiment les articles longs, quand vous voyez le nombre de mots de l’article, c’est aussi un plein sentiment d’accomplissement.

5. MarkDown Editor

Et si nous voulons juste l'expérience WYSIWYG dans Typora ?

J'ai également trouvé un plug-in MarkDown Editor :

Une fois l'installation terminée, sélectionnez Ouvrir avec MarkDown Editor pour le fichier MD afin d'ouvrir le fichier MD WYSIWYG. 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用户名/你的仓库名@发布的版本号

    Il existe d'autres plug-ins :
  • markdownlint : vérification du format markdow
    Markdown Preview Github Style : Aperçu du thème GitHub

  • Vous pouvez également l'essayer.

  3. Construction du lit d'images
Lors de l'écriture avec MarkDown, il y a une autre exigence importante, à savoir que les articles que nous écrivons doivent être publiés. Les images dans MD sont enregistrées sous forme de chemins. Les chemins locaux ne sont pas accessibles lors de la publication, nous devons donc connecter l'éditeur MD à la fonction de lit d'images.

J'avais l'habitude de créer un lit de mise en page en utilisant Typora+PicGo+Gitee Puis quelque chose s'est produit avec Gitee et je l'ai changé en Typora+PicGo+Github. idée, créez un lit de mise en page sur VS Code.

1.Configuration de l'entrepôt GitHub🎜🎜

🎜2.1 Créer un nouvel entrepôt🎜

🎜Créer un nouveau GitHub. dépôt : 🎜

🎜Public, nécessaire pour éviter l'inaccessibilité🎜🎜Ajouter un fichier READM pour éviter que le dépôt n'ait pas de branche tronc🎜🎜🎜🎜

🎜2.2. Générer un jeton🎜

🎜🎜Entrez les paramètres🎜🎜🎜🎜🎜
🎜🎜Trouver les paramètres du développeur🎜🎜🎜🎜🎜
🎜🎜Créez de nouveaux jetons d'accès personnels, définissez l'heure pour ne jamais expirer, donnez simplement l'autorisation au dépôt🎜🎜🎜🎜🎜
🎜🎜Le jeton généré est requis. Écrivez-le vers le bas et affichez-le une seule fois🎜🎜🎜🎜🎜

🎜2. Installez et configurez PicGo🎜🎜

🎜2.1. Installez le plug-in PicGO🎜 h4>🎜 Recherchez PicGo dans VS Code et installez : 🎜🎜🎜

🎜2.2. Configurer PicGO🎜

🎜Ouvrir la configuration étendue de PicGo🎜🎜🎜🎜
🎜Configurez le téléchargeur et sélectionnez github🎜🎜🎜 🎜
🎜 🎜 Configuration liée à GitHub, prenez ma configuration comme exemple : 🎜
🎜🎜Branch : main, branch 🎜🎜🎜🎜Path : vide, vous pouvez également configurer un chemin relatif 🎜🎜🎜🎜Url personnalisée : vide, 🎜🎜 peut effectivement être configuré Une URL accélérée CDN, jsDeliver, c'est un CDN gratuit, il semble être indisponible récemment, vous pouvez aussi l'essayer, comment l'utiliser : https://cdn.jsdelivr.net/gh/your github Nom d'utilisateur/nom de votre entrepôt@numéro de version publiée——🎜cdn.jsdelivr.net/gh/fighter3…🎜🎜🎜🎜🎜Repo :fighter3/picgo-win, nom d'utilisateur/format d'entrepôt🎜🎜🎜 🎜Jeton : Remplissez simplement celui que vous avez enregistré auparavant🎜🎜🎜🎜🎜🎜🎜🎜

3. Ouvrez le fichier MD en utilisant

• , collez une image ailleurs, utilisez 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

Utiliser GitHub comme lit d'images n'est toujours pas idéal dans l'ensemble, et le téléchargement et l'accès ne sont pas stables. changez également le lit d'image en Qiniu, Tencent Cloud ou Alibaba Cloud dans le plug-in PicGo. Le processus est généralement similaire et relativement simple.


Pour plus de connaissances sur VSCode, veuillez visiter : tutoriel vscode !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!