Als je voor het web schrijft, wil je misschien eens kijken naar Markdown. Er zijn tal van Markdown-apps die geschikt zijn voor webschrijvers. Maar gratis code-editors zoals Microsoft's Visual Studio Code (VSCode) kunnen nog krachtiger zijn.

VSCode begrijpt Markdown en heeft ingebouwde tools voor het bekijken ervan in HTML. U kunt echter tekstverwerkerfunctionaliteit toevoegen, zoals het aantal woorden en een spellingcontrole. Mogelijk wilt u ook websitespecifieke aanpassingen voor de previewer inschakelen.

Ten slotte is de mogelijkheid om Markdown als HTML te kopiëren, zodat u het netjes in een Content Management Systeem (CMS) kunt plakken, een must.

Download en installeer VSCode

Download om te beginnen VSCode of het open source alternatief VSCodium. Versies van elk zijn beschikbaar voor alle belangrijke desktopbesturingssystemen.

Zodra je gedownload en geïnstalleerd VSCode, voer de toepassing uit om te beginnen.

Extensie voor Word Count installeren

Begin met het toevoegen van een woordenteller. Er zijn veel extensies beschikbaar die dit aankunnen. Degene die het beste onderscheid maakt tussen echte woorden en code of bestandsnamen is Microsoft's eigen Word Counter-extensie.

instagram viewer

downloaden:Aantal woorden VSCode-extensie (gratis)

  1. Klik op Extensie downloaden onder Bronnen in het deelvenster rechtsonder.
  2. Schakel na het downloaden over naar VSCode.
  3. Klik op de tandwiel icoon in de linkerbenedenhoek van de interface.
  4. Klik op Extensies.
  5. Klik op het weglatingsteken (...) aan de bovenkant van het deelvenster Extensies.
  6. Klik Installeren vanaf VSIX.
  7. Kies de ms-vscode.wordcount-*.vsix bestand dat u zojuist hebt gedownload.

De Aantal woorden extensie moet nu worden geïnstalleerd. Test het door een nieuw Markdown-bestand te openen en te typen. U zou nu een woordenteller linksonder in de interface moeten zien:

Spellingcontrole-extensie installeren

U wilt ook spellingcontrole toevoegen. Net als bij woordtellers zijn er veel extensies die de spellingcontrole afhandelen. De meest populaire is Spellingcontrole code door Street Side Software omdat het in vele talen beschikbaar is.

downloaden:Spellingcontrole code VSCode-extensie (gratis)

  1. Volg stap 1 tot en met 6 uit het bovenstaande gedeelte.
  2. Kies de streetsidesoftware.code-spell-checker-*.vsix bestand dat u zojuist hebt gedownload.

De Spellingcontrole code extensie moet nu worden geïnstalleerd. Test het door een nieuw Markdown-bestand te openen en verkeerd gespelde woorden te typen.

Je zou een blauwe kronkelende lijn onder die woorden moeten zien, samen met een aantal fouten in de rechterbenedenhoek van de interface:

Pas de Error Squiggle aan

Het grootste probleem met deze spellingcontrole-extensie is de zwakke blauwe kleur die wordt gebruikt voor de kronkel die fouten identificeert. Het heeft de neiging om op te gaan in de achtergrond van donkere thema's en wordt hergebruikt voor andere Markdown-elementen.

Je kunt proberen het te veranderen in een gewaagde rode kleur zoals je zou verwachten in een tekstverwerker:

  1. Klik op de tandwiel icoon in de linkerbenedenhoek van de interface.
  2. Klik op Instellingen.
  3. Klik op Werkbank, dan Uiterlijk.
  4. Scroll naar beneden naar Kleuraanpassing:
  5. Klik Bewerken in settings.json.
  6. Plak de volgende code in de editor die in een nieuw tabblad wordt geopend:
    "editorInfo.voorgrond": "#ff0000"
  7. Sluit het bestand en sla het op.

Als je nu een woord verkeerd spelt, zal VSCode het versieren met een felrode kronkel:

Negeren van valse positieven

De spellingcontrole herkent bepaalde branchespecifieke termen of eigennamen zoals bedrijfsnamen mogelijk niet. In de bovenstaande schermafbeelding markeert VSCode bijvoorbeeld de afkorting "distro" als een spelfout.

Als u deze woorden niet meer als fouten wilt zien, kunt u ze toevoegen aan uw Gebruikersinstellingen.

  1. Klik met de rechtermuisknop op het woord dat u door de spellingcontrole wilt laten negeren.
  2. Beweeg over Spelling en selecteer Woorden toevoegen aan gebruikersinstellingen.

Vanaf nu identificeert de spellingcontrole deze woorden niet langer als onjuist:

Installeer Copy Markdown als HTML-extensie

Installeer vervolgens de Copy Markdown als HTML-extensie, zodat u de geformatteerde Markdown kunt kopiëren en plakken.

downloaden:Markdown kopiëren als HTML VSCode-extensie (gratis)

  1. Volg stap 1 tot en met 6 van de bovenstaande secties.
  2. Kies de jerriepelser.copy-markdown-as-html-1.1.0.vsix bestand dat u zojuist hebt gedownload.

Nu zou je Markdown van VSCode moeten kunnen kopiëren en als schone HTML in een CMS moeten plakken. Om dit te testen:

  1. Selecteer wat Markdown-tekst.
  2. Open de Opdrachtenpalet in de Visie menu, of door op te drukken CTRL+Shift+P.
  3. Kiezen Markdown: kopiëren als HTML:
  4. Plak de gekopieerde Markdown in een nieuw HTML-bestand.

Je zou moeten zien dat de gekopieerde Markdown correct is geplakt als HTML:

Het voorbeeldvenster aanpassen

Standaard heeft het voorbeeldvenster dezelfde stijl als het huidige VSCode-thema.

Het is echter mogelijk dat voorbeelden de uiteindelijke bestemming van uw inhoud beter weergeven. U kunt het voorbeeldvenster aanpassen zodat uw Markdown eruitziet alsof deze al op de website staat waarnaar u publiceert.

U kunt elke gewenste website gebruiken; de volgende stijlen zijn overgenomen van MUO. Alleen maar gebruik de tool voor het inspecteren van elementen van uw browser om lettertypen te vinden en kies kleuren van elke website.

  1. Maak een nieuw bestand en noem het zoiets als "CustomStyles.css"
  2. Plak de volgende voorbeeld-CSS-code in het bestand:
    lichaam {
     Achtergrond kleur: #ff;
     kleur: #2c2c2c;
     lettertypefamilie: Roboto;
     lettergrootte: 18px;
     lettergewicht: 400;
    lijnhoogte: 1.7em;
     maximale breedte: 750px;
    }
    h1 {
     lettergrootte: 38px;
     lettergewicht: 800;
    }
    

    h2 {
     lettergrootte: 34px;
     lettergewicht: 700;
    }
    

    h3 {
     lettergrootte: 24px;
     lettergewicht: 700;
    }
    

    a {
     rand-onder: 2px vast #bf0d0b;
     kleur: #bf0d0b;
     lettergewicht: 700;
    }
    

    a:zweven {
     kleur: #ff;
     achtergrond: #bf0d0b;
    }
    krachtig {
     lettergewicht: vet;
    }
  3. Sluit het bestand en sla het op.
  4. Klik op de tandwiel icoon in de linkerbenedenhoek van de interface.
  5. Klik op Instellingen.
  6. Klik op Extensies en dan Markdown.
  7. Scroll naar beneden naar Markdown: stijlen en klik Voeg item toe.
  8. Voer het pad van uw. in CustomStyles.css bestand, bijvoorbeeld:
    C:\Gebruikers\Adam\Aangepaste stijlen.css
  9. Klik Oké.

Als je deze eenmaal hebt gemaakt, zou je een voorbeeldvenster moeten krijgen dat veel op dit artikel lijkt.

Nogmaals, ik heb deze waarden verkregen door de Inspect Element-tool van mijn browser op MUO te gebruiken, maar u zult de waarden voor uw eigen bestemmingswebsite willen vinden.

Editor Thema's

Het standaard VSCode-thema is verkrijgbaar in zowel donker als licht, met versies met hoog contrast van elk. Maar zoals bij elke goede code-editor zijn er: een heleboel geweldige thema's van derden beschikbaar.

Als je het uiterlijk van een tekstverwerker verkiest boven dat van een code-editor, raad ik het Office-thema van huacat aan:

Als u de voorkeur geeft aan een code-editor, zijn algemene thema's zoals Dracula, Gruvbox, Material (zie onderstaande schermafbeelding) en Nord allemaal beschikbaar op de extensiemarktplaats.

Een nieuw thema installeren:

  1. Klik op de tandwiel icoon in de linkerbenedenhoek van de interface.
  2. Klik op Extensies.
  3. Zoek naar een van de bovengenoemde thema's of filter eenvoudig de categorie op thema's en blader door wat er beschikbaar is.

Is VSCode de ultieme markdown-editor?

Dus, is VSCode de ultieme Markdown-editor voor webinhoud? Out-of-the-box, waarschijnlijk niet. Maar het is ongeveer zo uitbreidbaar als iets zou kunnen zijn.

Woordtellers, spellingcontrole, Markdown kopiëren als HTML, preview-aanpassingen en thema's komen gewoon aan de oppervlakte. Er is een ecosysteem vol extensies beschikbaar voor VSCode, en je bent vrij om het je eigen te maken.