So verwandeln Sie VSCode in den ultimativen Markdown-Editor

So verwandeln Sie VSCode in den ultimativen Markdown-Editor

Wenn Sie für das Web schreiben, sollten Sie sich Markdown ansehen. Es gibt viele Markdown-Apps, die sich an Webautoren richten. Aber kostenlose Code-Editoren wie Microsofts Visual Studio Code (VSCode) können noch leistungsfähiger sein.





Konvertieren Sie Kindle Fire in ein Android-Tablet

VSCode versteht Markdown und verfügt über integrierte Tools für die Vorschau in HTML. Sie können jedoch Textverarbeitungsfunktionen wie Wortzählung und Rechtschreibprüfung hinzufügen. Möglicherweise möchten Sie auch websitespezifische Anpassungen für die Vorschau aktivieren.



MAKEUSEOF VIDEO DES TAGES

Schließlich ist die Möglichkeit, Markdown als HTML zu kopieren, damit Sie es sauber in ein Content Management System (CMS) einfügen können, ein Muss.





Laden Sie VSCode herunter und installieren Sie es

Laden Sie zunächst entweder VSCode oder die Open-Source-Alternative VSCodium herunter. Versionen von jedem sind für alle gängigen Desktop-Betriebssysteme verfügbar.

Sobald Sie haben VSCode heruntergeladen und installiert , führen Sie die Anwendung aus, um zu beginnen.



Der Standard-Begrüßungsbildschirm von VSCode.

Installieren Sie die Word Count-Erweiterung

Beginnen Sie mit dem Hinzufügen eines Wortzählers. Es gibt viele Erweiterungen, die damit umgehen. Diejenige, die am besten zwischen tatsächlichen Wörtern und Code oder Dateinamen unterscheidet, ist Microsofts eigene Word Counter-Erweiterung.

Download: Wortzahl VSCode-Erweiterung (kostenlos)



  1. Klicke auf Erweiterung herunterladen unter Ressourcen im unteren rechten Bereich.
  2. Wechseln Sie nach dem Herunterladen zu VSCode.
  3. Klick auf das Zahnrad-Symbol in der linken unteren Ecke der Benutzeroberfläche.
  4. Klicke auf Erweiterungen .
  5. Klicken Sie auf die Auslassungspunkte ( ... ) oben im Bereich Erweiterungen.
  6. Klicken Von VSIX installieren . ​​​​​​​VSCode mit der Word Count-Erweiterung von Microsoft zeigt die Erkennung der Anzahl von Wörtern in einem Beispieldokument.
  7. Wählen Sie das ms-vscode.wordcount-*.vsix Datei, die Sie gerade heruntergeladen haben.

Das Wortzahl Die Erweiterung sollte jetzt installiert werden. Testen Sie es, indem Sie eine neue Markdown-Datei öffnen und eingeben. Sie sollten jetzt unten links in der Benutzeroberfläche einen Wortzähler sehen:

​​​​​​​Ein in VSCode geöffnetes Markdown-Dokument mit Rechtschreibfehlern, die durch eine weiche blaue verschnörkelte Unterstreichung erkannt werden.

Installieren Sie die Rechtschreibprüfungserweiterung

Sie möchten auch eine Rechtschreibprüfungsfunktion hinzufügen. Wie bei Wortzählern gibt es viele Erweiterungen, die die Rechtschreibprüfung übernehmen. Am beliebtesten ist Code-Rechtschreibprüfung von Street Side Software, da es in vielen Sprachen verfügbar ist.



Download: Code-Rechtschreibprüfung VSCode-Erweiterung (kostenlos)

  1. Befolgen Sie die Schritte 1 bis 6 im obigen Abschnitt.
  2. Wählen Sie das streetsidesoftware.code-spell-checker-*.vsix Datei, die Sie gerade heruntergeladen haben.

Das Code-Rechtschreibprüfung Die Erweiterung sollte jetzt installiert werden. Testen Sie es, indem Sie eine neue Markdown-Datei öffnen und falsch geschriebene Wörter eingeben.

​​​​​​​Die untere rechte Seite der VSCode-Statusleiste mit einer Anzeige, die vier Rechtschreibfehler anzeigt.

Sie sollten eine blaue Wellenlinie unter diesen Wörtern zusammen mit einer Anzahl von Fehlern unten rechts auf der Benutzeroberfläche sehen:

Die VSCode-Datei settings.json wird mit hinzugefügtem benutzerdefiniertem Code geöffnet.

Passen Sie das Fehler-Squiggle an

Das größte Problem bei dieser Rechtschreibprüfungserweiterung ist die schwache blaue Farbe, die für die Kringel verwendet wird, die Fehler identifiziert. Es fügt sich tendenziell in den Hintergrund dunkler Themen ein und wird für andere Markdown-Elemente wiederverwendet.

Sie können versuchen, es in eine kräftige rote Farbe zu ändern, wie Sie es in einem Textverarbeitungsprogramm erwarten würden:

  1. Klick auf das Zahnrad-Symbol in der linken unteren Ecke der Benutzeroberfläche.
  2. Klicke auf Einstellungen .
  3. Klicke auf Werkbank , dann Aussehen .
  4. Scrollen Sie nach unten zu Farbanpassung : Ein in VSCode geöffnetes Markdown-Dokument mit offensichtlichen Rechtschreibfehlern, die durch eine starke rote verschnörkelte Unterstreichung erkannt werden.
  5. Klicken Bearbeiten Sie in settings.json .
  6. Fügen Sie den folgenden Code in den Editor ein, der sich in einer neuen Registerkarte öffnet: 
    "editorInfo.foreground": "#ff0000"
    Ein in VSCode geöffnetes Markdown-Dokument mit drei Rechtschreibfehlern.
  7. und speichern Sie die Datei.

Wenn Sie jetzt ein Wort falsch schreiben, schmückt VSCode es mit einem leuchtend roten Kringel:

Ein ordnungsgemäß formatiertes HTML-Dokument, das in VSCode geöffnet ist.

Ignorieren falsch positiver Ergebnisse

Die Rechtschreibprüfung erkennt möglicherweise bestimmte branchenspezifische Begriffe oder Eigennamen wie Firmennamen nicht. Im obigen Screenshot hebt VSCode beispielsweise die Abkürzung „Distro“ als Rechtschreibfehler hervor.

Damit diese Wörter nicht mehr als Fehler angezeigt werden, sollten Sie sie zu Ihrer hinzufügen Benutzereinstellungen .

  1. Klicken Sie mit der rechten Maustaste auf das Wort, das die Rechtschreibprüfung ignorieren soll.
  2. Bewegen Sie den Mauszeiger darüber Rechtschreibung und auswählen Fügen Sie Wörter zu den Benutzereinstellungen hinzu . ​​​​​​​Dieser Artikel als Markdown-Datei wird in VSCode mit der Standardvorschau geöffnet.

Ab sofort erkennt die Rechtschreibprüfung diese Wörter nicht mehr als falsch:

​​​​​​​Das Menü VSCode-Einstellungen > Erweiterungen > Markdown > Markdown: Stile.

Installieren Sie Copy Markdown als HTML-Erweiterung

Installieren Sie als Nächstes die Erweiterung Copy Markdown as HTML, damit Sie formatierten Markdown kopieren und einfügen können.

Download: Kopieren Sie Markdown als HTML VSCode-Erweiterung (kostenlos)

  1. Befolgen Sie die Schritte 1 bis 6 aus den obigen Abschnitten.
  2. Wählen Sie das jerriepelser.copy-markdown-as-html-1.1.0.vsix Datei, die Sie gerade heruntergeladen haben.

Jetzt sollten Sie in der Lage sein, Markdown aus VSCode zu kopieren und als sauberes HTML in ein CMS einzufügen. Um dies zu testen:

  1. Wählen Sie Markdown-Text aus.
  2. Öffne das Befehlspalette in dem Aussicht Menü oder durch Drücken von STRG+UMSCHALT+P .
  3. Wählen Markdown: Als HTML kopieren : Dieser Artikel wird als Markdown-Datei in VSCode geöffnet, wobei die Vorschau so angepasst ist, dass sie wie MUO aussieht.
  4. Fügen Sie den kopierten Markdown in eine neue HTML-Datei ein.

Sie sollten sehen, dass der kopierte Markdown ordnungsgemäß als HTML eingefügt wurde:

Der VSCode-Begrüßungsbildschirm im hellen Design.

Anpassen des Vorschaubereichs

Standardmäßig hat das Vorschaufenster denselben Stil wie das aktuelle VSCode-Design.

Das Markdown dieses Artikels wird in VSCode mit dem Office-Design von huacat geöffnet.

Möglicherweise möchten Sie jedoch, dass Vorschauen das endgültige Ziel Ihrer Inhalte besser widerspiegeln. Sie können das Vorschaufenster anpassen, damit Ihr Markdown so aussieht, als wäre es bereits auf der Website, auf der Sie veröffentlichen.

Sie können jede beliebige Website verwenden; Die folgenden Stile wurden von MUO übernommen. Gerade Verwenden Sie das Inspect-Element-Tool Ihres Browsers, um Schriftarten zu finden und Wählen Sie Farben von einer beliebigen Website aus .

  1. Erstellen Sie eine neue Datei und nennen Sie sie etwa ' CustomStyles.css '
  2. Fügen Sie den folgenden Beispiel-CSS-Code in die Datei ein: 
    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. und speichern Sie die Datei.
  4. Klick auf das Zahnrad-Symbol in der linken unteren Ecke der Benutzeroberfläche.
  5. Klicke auf Einstellungen .
  6. Klicke auf Erweiterungen und dann Abschlag .
  7. Scrollen Sie nach unten zu Markdown: Stile und klicken Artikel hinzufügen .
  8. Geben Sie den Pfad Ihrer ein CustomStyles.css Datei, zum Beispiel: 
    C:\Users\Adam\CustomStyles.css
    Das Markdown dieses Artikels wird in VSCode mit dem Design „Material“ von Equinusocio geöffnet.
  9. Klicken OK .

Sobald Sie diese erstellt haben, sollten Sie am Ende ein Vorschaufenster haben, das diesem Artikel sehr ähnlich sieht.

Auch hier habe ich diese Werte mit dem Inspect Element-Tool meines Browsers auf MUO erhalten, aber Sie möchten die Werte für Ihre eigene Ziel-Website finden.

Editor-Designs

Das standardmäßige VSCode-Design ist sowohl in Dunkel als auch in Hell erhältlich, mit jeweils kontrastreichen Versionen. Aber wie bei jedem guten Code-Editor gibt es sie eine Menge toller Designs von Drittanbietern verfügbar .

Wenn Sie das Aussehen einer Textverarbeitung dem eines Code-Editors vorziehen, empfehle ich das Office-Theme von huacat:

Wenn Sie einen Code-Editor bevorzugen, sind gängige Themen wie Dracula, Gruvbox, Material (siehe Screenshot unten) und Nord auf dem Marktplatz für Erweiterungen verfügbar.

So stellen Sie das Chrome der vorherigen Sitzung wieder her

So installieren Sie ein neues Thema:

  1. Klick auf das Zahnrad-Symbol in der linken unteren Ecke der Benutzeroberfläche.
  2. Klicke auf Erweiterungen .
  3. Suchen Sie nach einem der oben genannten Themen oder filtern Sie einfach die Kategorie nach Themen und durchsuchen Sie, was verfügbar ist.

Ist VSCode der ultimative Markdown-Editor?

Ist VSCode also der ultimative Markdown-Editor für Webinhalte? Out-of-the-Box wahrscheinlich nicht. Aber es ist ungefähr so ​​erweiterbar, wie alles sein könnte.

Wortzähler, Rechtschreibprüfung, Markdown als HTML kopieren, Vorschauanpassungen und Themen kratzen nur an der Oberfläche. Für VSCode steht ein Ökosystem voller Erweiterungen zur Verfügung, und Sie können es sich zu eigen machen.