Hoe VSCode in de ultieme Markdown-editor te veranderen

Hoe VSCode in de ultieme Markdown-editor te veranderen

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.





MAKEUSEVAN VIDEO VAN DE DAG

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.



  Het VSCode standaard welkomstscherm.

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.

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 .   ​​​​​​​VSCode met de Word Count-extensie van Microsoft die het aantal woorden in een voorbeelddocument detecteert.
  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:

  ​​​​​​​Een afwaarderingsdocument geopend in VSCode met spelfouten gedetecteerd door een zachtblauwe kronkelige onderstreping.

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)

waar is de portretmodus op iphone 7
  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.

  ​​​​​​​De rechterbenedenhoek van de VSCode-statusbalk met een indicator die vier spelfouten aangeeft.

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

  Het bestand VSCode settings.json wordt geopend met aangepaste code toegevoegd.

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 :   Een markdown-document geopend in VSCode met flagrante spelfouten gedetecteerd door een sterke rode kronkelige onderstreping.
  5. Klik Bewerken in settings.json .
  6. Plak de volgende code in de editor die in een nieuw tabblad wordt geopend:
    "editorInfo.foreground": "#ff0000"
      Een markdown-document geopend in VSCode met drie spelfouten.
  7. en sla het bestand op.

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

  Een correct opgemaakt HTML-document geopend in VSCode.

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 .   ​​​​​​​Dit artikel als een markdown-bestand geopend in VSCode met de standaard previewer.

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

  ​​​​​​​Het VSCode-menu Instellingen > Extensies > Markdown > Markdown: Stijlen.

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 :   Dit artikel als een markdown-bestand geopend in VSCode met de previewer aangepast om eruit te zien als MUO.
  4. Plak de gekopieerde Markdown in een nieuw HTML-bestand.

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

  Het VSCode-welkomstscherm in het lichtthema.

Het voorbeeldvenster aanpassen

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

  De prijsverlaging van dit artikel wordt geopend in VSCode met het Office-thema van huacat.

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:
    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. en sla het bestand 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:\Users\Adam\CustomStyles.css
      De prijsverlaging van dit artikel wordt geopend in VSCode met behulp van het Material-thema van Equinusocio.
  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 de categorie eenvoudig 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.