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.
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.
Une fois que vous avez téléchargé et installé VSCode, exécutez l'application pour commencer.
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)
- Cliquer sur Télécharger l'extension en dessous de Ressources dans le volet inférieur droit.
- Une fois téléchargé, passez à VSCode.
- Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
- Cliquer sur Rallonges.
- Cliquez sur les points de suspension (...) en haut du volet Extensions.
- Cliquez sur Installer à partir de VSIX.
- 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 :
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)
- Suivez les étapes 1 à 6 de la section ci-dessus.
- 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.
Vous devriez voir une ligne ondulée bleue sous ces mots ainsi qu'un nombre d'erreurs en bas à droite de l'interface :
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 :
- Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
- Cliquer sur Réglages.
- Cliquer sur Table de travail, alors Apparence.
- Faites défiler jusqu'à Personnalisation des couleurs:
- Cliquez sur Modifier dans settings.json.
- Collez le code suivant dans l'éditeur qui s'ouvre dans un nouvel onglet :
"editorInfo.foreground": "#ff0000" - Fermez et enregistrez le fichier.
Maintenant, si vous épelez mal un mot, VSCode le décorera avec un gribouillis rouge vif :
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.
- Faites un clic droit sur le mot que vous voulez que le correcteur orthographique ignore.
- Survolez Orthographe et sélectionnez Ajouter des mots aux paramètres utilisateur.
Désormais, le correcteur orthographique n'identifiera plus ces mots comme incorrects :
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)
- Suivez les étapes 1 à 6 des sections ci-dessus.
- 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 :
- Sélectionnez du texte Markdown.
- Ouvrez le Palette de commandes dans le Voir menu ou en appuyant sur CTRL+Maj+P.
- Choisir Markdown: copier au format HTML:
- Collez le Markdown copié dans un nouveau fichier HTML.
Vous devriez voir que le Markdown copié a été correctement collé au format HTML :
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.
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.
- Créez un nouveau fichier et nommez-le quelque chose comme "CustomStyles.cssCustomStyles.css"
- Collez l'exemple de code CSS suivant dans le fichier :
corps {
Couleur de l'arrière plan: #fff;
Couleur: #2c2c2c ;
famille de polices: Roboto ;
taille de police: 18 px ;
poids de la police: 400 ;
hauteur de la ligne: 1.7em;
largeur maximale: 750 px ;
}h1 {
taille de police: 38px ;
poids de la police: 800 ;
}h2 {
taille de police: 34 px ;
poids de la police: 700 ;
}h3 {
taille de police: 24 px ;
poids de la police: 700 ;
}un {
Bordure du bas: 2px solide #bf0d0b ;
Couleur: #bf0d0b ;
poids de la police: 700 ;
}un:flotter {
Couleur: #fff;
Contexte: #bf0d0b ;
}fort {
font-weight: gras ;
} - Fermez et enregistrez le fichier.
- Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
- Cliquer sur Réglages.
- Cliquer sur Rallonges et alors Réduction.
- Faites défiler jusqu'à Markdown: Styles et cliquez Ajouter un item.
- Entrez le chemin de votre CustomStyles.cssCustomStyles.css fichier, par exemple :
C:\Utilisateurs\Adam\Styles personnalisés.css - 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 :
- Clique sur le icône d'engrenage dans le coin inférieur gauche de l'interface.
- Cliquer sur Rallonges.
- 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.
