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.

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.

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.

Installieren Sie die Word Count-Erweiterung

instagram viewer

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.
  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:

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.

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

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:
  5. Klicken Bearbeiten Sie in settings.json.
  6. Fügen Sie den folgenden Code in den Editor ein, der sich in einem neuen Tab öffnet:
    "editorInfo.foreground": "#ff0000"
  7. Schließen und speichern Sie die Datei.

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

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.

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

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:
  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:

Anpassen des Vorschaubereichs

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

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:
    Karosserie {
     Hintergrundfarbe: #F f f;
     Farbe: #2c2c2c;
     Schriftfamilie: Roboto;
     Schriftgröße: 18px;
     Schriftstärke: 400;
    Zeilenhöhe: 10,7 Uhr;
     maximale Breite: 750px;
    }
    h1 {
     Schriftgröße: 38px;
     Schriftstärke: 800;
    }
    

    h2 {
     Schriftgröße: 34px;
     Schriftstärke: 700;
    }
    

    h3 {
     Schriftgröße: 24px;
     Schriftstärke: 700;
    }
    

    a {
     Rand unten: 2px fest #bf0d0b;
     Farbe: #bf0d0b;
     Schriftstärke: 700;
    }
    

    a:schweben {
     Farbe: #F f f;
     Hintergrund: #bf0d0b;
    }
    stark {
     Schriftdicke: fett;
    }
  3. Schließen 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:\Benutzer\Adam\Benutzerdefinierte Stile.css
  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 installieren Sie ein neues Design:

  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.