Comment transformer VSCode en éditeur de Markdown ultime

Comment transformer VSCode en éditeur de Markdown ultime

Si vous écrivez pour le Web, vous voudrez peut-être vous pencher sur Markdown. Il existe de nombreuses applications Markdown qui s'adressent aux rédacteurs Web. Mais les éditeurs de code gratuits comme Visual Studio Code (VSCode) de Microsoft peuvent être encore plus puissants.





VSCode comprend Markdown et dispose d'outils intégrés pour le prévisualiser en HTML. Cependant, vous pouvez ajouter des fonctionnalités de traitement de texte telles que le nombre de mots et un correcteur orthographique. Vous pouvez également activer les personnalisations spécifiques au site Web pour l'aperçu.



UTILISEZ LA VIDÉO DU JOUR

Enfin, la possibilité de copier Markdown au format HTML afin de pouvoir le coller proprement dans un système de gestion de contenu (CMS) est indispensable.





Téléchargez et installez VSCode

Pour commencer, téléchargez VSCode ou son alternative open source VSCodium. Des versions de chacun sont disponibles pour tous les principaux systèmes d'exploitation de bureau.

que faire si le compte facebook est cloné

Une fois que vous avez téléchargé et installé VSCode , exécutez l'application pour commencer.



L'écran d'accueil par défaut de VSCode.

Installer l'extension de nombre de mots

Commencez par ajouter un compteur de mots. Il existe de nombreuses extensions disponibles qui gèrent cela. Celui qui différencie le mieux les mots réels et le code ou les noms de fichiers est l'extension Word Counter de Microsoft.

Télécharger: Nombre de mots Extension VSCode (gratuite)



  1. Cliquer sur Télécharger l'extension en dessous de Ressources dans le volet inférieur droit.
  2. Une fois téléchargé, passez à VSCode.
  3. Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
  4. Cliquer sur Rallonges .
  5. Cliquez sur les points de suspension ( ... ) en haut du volet Extensions.
  6. Cliquez sur Installer à partir de VSIX . ​​​​​​​VSCode avec l'extension Word Count de Microsoft montrant la détection du nombre de mots dans un exemple de document.
  7. Choisir la ms-vscode.wordcount-*.vsix fichier que vous venez de télécharger.

La Nombre de mots L'extension doit maintenant être installée. Testez-le en ouvrant un nouveau fichier Markdown et en tapant. Vous devriez maintenant voir un compteur de mots en bas à gauche de l'interface :

​​​​​​​Un document de démarquage ouvert dans VSCode avec des fautes d'orthographe détectées par un soulignement ondulé bleu doux.

Installer l'extension de vérification orthographique

Vous voudrez également ajouter une fonctionnalité de vérification orthographique. Comme pour les compteurs de mots, il existe de nombreuses extensions qui gèrent la vérification orthographique. Le plus populaire est Vérification orthographique du code par Street Side Software car il est disponible dans de nombreuses langues.



Télécharger: Vérification orthographique du code Extension VSCode (gratuite)

  1. Suivez les étapes 1 à 6 de la section ci-dessus.
  2. Choisir la streetsidesoftware.code-spell-checker-*.vsix fichier que vous venez de télécharger.

La Vérification orthographique du code L'extension doit maintenant être installée. Testez-le en ouvrant un nouveau fichier Markdown et en tapant des mots mal orthographiés.

​​​​​​​Le côté inférieur droit de la barre d'état de VSCode avec un indicateur indiquant quatre fautes d'orthographe.

Vous devriez voir une ligne ondulée bleue sous ces mots ainsi qu'un nombre d'erreurs en bas à droite de l'interface :

Le fichier VSCode settings.json s'ouvre avec le code personnalisé ajouté.

Personnaliser le gribouillis d'erreur

Le plus gros problème avec cette extension Spell Check est la faible couleur bleue utilisée pour le gribouillis qui identifie les erreurs. Il a tendance à se fondre dans l'arrière-plan des thèmes sombres et est réutilisé pour d'autres éléments Markdown.

Vous pouvez essayer de le changer en rouge vif comme vous vous attendez à le voir dans un traitement de texte :

  1. Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
  2. Cliquer sur Réglages .
  3. Cliquer sur Table de travail , alors Apparence .
  4. Faites défiler jusqu'à Personnalisation des couleurs : Un document de démarquage ouvert dans VSCode avec des fautes d'orthographe flagrantes détectées par un soulignement ondulé rouge fort.
  5. Cliquez sur Modifier dans settings.json .
  6. Collez le code suivant dans l'éditeur qui s'ouvre dans un nouvel onglet : 
    "editorInfo.foreground": "#ff0000"
    Un document Markdown ouvert dans VSCode avec trois fautes d'orthographe.
  7. et enregistrez le fichier.

Maintenant, si vous épelez mal un mot, VSCode le décorera avec un gribouillis rouge vif :

Un document HTML correctement formaté ouvert dans VSCode.

Ignorer les faux positifs

Le correcteur orthographique peut ne pas reconnaître certains termes spécifiques à l'industrie ou des noms propres comme les noms de société. Dans la capture d'écran ci-dessus, par exemple, VSCode met en évidence l'abréviation 'distro' comme une faute d'orthographe.

Pour ne plus voir ces mots comme des erreurs, vous devrez les ajouter à votre Paramètres utilisateur .

  1. Faites un clic droit sur le mot que vous voulez que le correcteur orthographique ignore.
  2. Survolez Orthographe et sélectionnez Ajouter des mots aux paramètres utilisateur . ​​​​​​​Cet article en tant que fichier de démarquage s'ouvre dans VSCode avec l'aperçu par défaut.

Désormais, le correcteur orthographique n'identifiera plus ces mots comme incorrects :

​​​​​​​Le menu Paramètres VSCode > Extensions > Markdown > Markdown : Styles.

Installer Copy Markdown en tant qu'extension HTML

Ensuite, installez l'extension Copy Markdown as HTML afin de pouvoir copier et coller Markdown formaté.

Télécharger: Copier Markdown au format HTML Extension VSCode (gratuite)

comment sauvegarder les signets chrome windows 10
  1. Suivez les étapes 1 à 6 des sections ci-dessus.
  2. Choisir la jerriepelser.copy-markdown-as-html-1.1.0.vsix fichier que vous venez de télécharger.

Vous devriez maintenant pouvoir copier Markdown à partir de VSCode et le coller dans un CMS en tant que code HTML propre. Pour tester ça :

  1. Sélectionnez du texte Markdown.
  2. Ouvrez le Palette de commandes dans le Voir menu ou en appuyant sur CTRL+Maj+P .
  3. Choisir Markdown : copier au format HTML : Cet article en tant que fichier de démarquage ouvert dans VSCode avec l'aperçu personnalisé pour ressembler à MUO.
  4. Collez le Markdown copié dans un nouveau fichier HTML.

Vous devriez voir que le Markdown copié a été correctement collé au format HTML :

L'écran d'accueil de VSCode dans le thème clair.

Personnalisation du volet de prévisualisation

Par défaut, le volet de prévisualisation aura le même style que le thème VSCode actuel.

Le démarquage de cet article s'ouvre dans VSCode en utilisant le thème Office de huacat.

Cependant, vous souhaiterez peut-être que les aperçus reflètent plus fidèlement la destination finale de votre contenu. Vous pouvez personnaliser le volet d'aperçu pour donner l'impression que votre Markdown se trouve déjà sur le site Web sur lequel vous publiez.

Vous pouvez utiliser n'importe quel site Web que vous voulez; les styles suivants ont été tirés de MUO. Juste utilisez l'outil d'inspection des éléments de votre navigateur pour trouver des polices et choisissez les couleurs de n'importe quel site Web .

  1. Créez un nouveau fichier et nommez-le quelque chose comme ' CustomStyles.cssCustomStyles.css '
  2. Collez l'exemple de code CSS suivant dans le fichier : 
    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. et enregistrez le fichier.
  4. Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
  5. Cliquer sur Réglages .
  6. Cliquer sur Rallonges et alors Réduction .
  7. Faites défiler jusqu'à Markdown : Styles et cliquez Ajouter un item .
  8. Entrez le chemin de votre CustomStyles.cssCustomStyles.css fichier, par exemple : 
    C:\Users\Adam\CustomStyles.css
    Le démarquage de cet article s'ouvre dans VSCode en utilisant le thème Material par Equinusocio.
  9. Cliquez sur D'ACCORD .

Une fois que vous les avez créés, vous devriez vous retrouver avec un volet de prévisualisation qui ressemble beaucoup à cet article.

Encore une fois, j'ai obtenu ces valeurs en utilisant l'outil Inspect Element de mon navigateur sur MUO, mais vous voudrez trouver les valeurs pour votre propre site Web de destination.

Thèmes de l'éditeur

Le thème VSCode par défaut est à la fois sombre et clair, avec des versions à contraste élevé de chacun. Mais comme tout bon éditeur de code, il y a une tonne de grands thèmes tiers disponibles .

Si vous préférez le look d'un traitement de texte à celui d'un éditeur de code, je vous recommande le thème Office de huacat :

Si vous préférez un éditeur de code, des thèmes communs comme Dracula, Gruvbox, Material (voir capture d'écran ci-dessous) et Nord sont tous disponibles sur le marché des extensions.

Pour installer un nouveau thème :

  1. Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
  2. Cliquer sur Rallonges .
  3. Recherchez l'un des thèmes mentionnés ci-dessus ou filtrez simplement la catégorie pour thèmes et parcourez ce qui est disponible.

VSCode est-il l'éditeur ultime de Markdown ?

Alors, VSCode est-il l'éditeur Markdown ultime pour le contenu Web ? Prêt à l'emploi, probablement pas. Mais c'est à peu près aussi extensible que tout ce qui pourrait l'être.

Les compteurs de mots, les correcteurs orthographiques, la copie Markdown au format HTML, les personnalisations d'aperçu et les thèmes ne font qu'effleurer la surface. Il existe un écosystème plein d'extensions disponibles pour VSCode, et vous êtes libre de le personnaliser.