Se scrivi per il web, potresti voler esaminare Markdown. Ci sono molte app Markdown che si rivolgono agli scrittori web. Ma gli editor di codice gratuiti come Visual Studio Code (VSCode) di Microsoft possono essere ancora più potenti.

VSCode comprende Markdown e dispone di strumenti integrati per visualizzarlo in anteprima in HTML. Tuttavia, puoi aggiungere funzionalità di elaborazione testi come il conteggio delle parole e un correttore ortografico. Potresti anche voler abilitare le personalizzazioni specifiche del sito Web per il visualizzatore di anteprima.

Infine, la capacità di copiare Markdown come HTML in modo da poterlo incollare in modo pulito in un Content Management System (CMS) è un must.

Scarica e installa VSCode

Per iniziare, scarica VSCode o la sua alternativa open source VSCodium. Le versioni di ciascuno sono disponibili per tutti i principali sistemi operativi desktop.

Una volta che hai VSCode scaricato e installato, eseguire l'applicazione per iniziare.

Installa l'estensione Conteggio parole

instagram viewer

Inizia aggiungendo un contatore di parole. Ci sono molte estensioni disponibili che gestiscono questo. Quello che distingue meglio tra parole reali e codice o nomi di file è l'estensione Word Counter di Microsoft.

Scarica:Conteggio parole Estensione VSCode (gratuita)

  1. Clicca su Scarica estensione sotto Risorse nel riquadro in basso a destra.
  2. Una volta scaricato, passa a VSCode.
  3. Clicca sul icona a forma di ingranaggio nell'angolo inferiore sinistro dell'interfaccia.
  4. Clicca su Estensioni.
  5. Fare clic sui puntini di sospensione (...) nella parte superiore del riquadro Estensioni.
  6. Clic Installa da VSIX.
  7. Scegli il ms-vscode.wordcount-*.vsix file che hai appena scaricato.

Il Conteggio parole ora dovrebbe essere installata l'estensione. Provalo aprendo un nuovo file Markdown e digitando. Ora dovresti vedere un contatore di parole nella parte in basso a sinistra dell'interfaccia:

Installa l'estensione per il controllo ortografico

Ti consigliamo anche di aggiungere la funzionalità di controllo ortografico. Come per i contatori di parole, ci sono molte estensioni che gestiscono il controllo ortografico. Il più popolare è Controllo ortografico del codice di Street Side Software poiché è disponibile in molte lingue.

Scarica:Controllo ortografico del codice Estensione VSCode (gratuita)

  1. Segui i passaggi da 1 a 6 della sezione precedente.
  2. Scegli il streetsidesoftware.code-spell-checker-*.vsix file che hai appena scaricato.

Il Controllo ortografico del codice ora dovrebbe essere installata l'estensione. Provalo aprendo un nuovo file Markdown e digitando parole errate.

Dovresti vedere una linea ondulata blu sotto quelle parole insieme a un conteggio di errori nella parte in basso a destra dell'interfaccia:

Personalizza l'errore Squiggle

Il problema più grande con questa estensione Controllo ortografico è il debole colore blu utilizzato per lo scarabocchio che identifica gli errori. Tende a confondersi con lo sfondo di temi scuri e viene riutilizzato per altri elementi di Markdown.

Puoi provare a cambiarlo in un colore rosso audace come ti aspetteresti di vedere in un word processor:

  1. Clicca sul icona a forma di ingranaggio nell'angolo inferiore sinistro dell'interfaccia.
  2. Clicca su Impostazioni.
  3. Clicca su banco di lavoro, poi Aspetto esteriore.
  4. Scorri verso il basso fino a Personalizzazione del colore:
  5. Clic Modifica in settings.json.
  6. Incolla il codice seguente nell'editor che si apre in una nuova scheda:
    "editorInfo.in primo piano": "#ff0000"
  7. Chiudi e salva il file.

Ora, se sbagli una parola, VSCode la decorerà con uno scarabocchio rosso brillante:

Ignorare i falsi positivi

Il correttore ortografico potrebbe non riconoscere alcuni termini specifici del settore o nomi propri come i nomi di società. Nello screenshot sopra, ad esempio, VSCode evidenzia l'abbreviazione "distro" come un errore di ortografia.

Per smettere di vedere queste parole come errori, ti consigliamo di aggiungerle al tuo Impostazioni utente.

  1. Fare clic con il pulsante destro del mouse sulla parola che si desidera ignorare dal correttore ortografico.
  2. Passa il mouse sopra Ortografia e seleziona Aggiungi parole alle impostazioni utente.

D'ora in poi, il controllo ortografico non identificherà più queste parole come errate:

Installa Copy Markdown come estensione HTML

Quindi, installa l'estensione Copy Markdown come HTML in modo da poter copiare e incollare Markdown formattato.

Scarica:Copia Markdown come HTML Estensione VSCode (gratuita)

  1. Segui i passaggi da 1 a 6 delle sezioni precedenti.
  2. Scegli il jerriepelser.copy-markdown-as-html-1.1.0.vsix file che hai appena scaricato.

Ora dovresti essere in grado di copiare Markdown da VSCode e incollarlo in un CMS come HTML pulito. Per testare questo:

  1. Seleziona del testo Markdown.
  2. Apri il Tavolozza dei comandi nel Visualizzazione menu o premendo CTRL+MAIUSC+P.
  3. Scegliere Markdown: copia come HTML:
  4. Incolla il Markdown copiato in un nuovo file HTML.

Dovresti vedere che il Markdown copiato è stato incollato correttamente come HTML:

Personalizzazione del riquadro di anteprima

Per impostazione predefinita, il riquadro di anteprima avrà lo stesso stile del tema VSCode corrente.

Tuttavia, potresti volere che le anteprime riflettano più da vicino la destinazione finale dei tuoi contenuti. Puoi personalizzare il riquadro di anteprima per far sembrare che il tuo Markdown sia già sul sito Web su cui stai pubblicando.

Puoi utilizzare qualsiasi sito web che desideri; i seguenti stili sono stati presi da MUO. Solo usa lo strumento di ispezione degli elementi del tuo browser per trovare i caratteri e scegli i colori da qualsiasi sito web.

  1. Crea un nuovo file e assegnagli un nome come "CustomStyles.css"
  2. Incolla il seguente codice CSS di esempio nel file:
    corpo {
     colore di sfondo: #F F F;
     colore: #2c2c2c;
     famiglia di caratteri: Roboto;
     dimensione del carattere: 18px;
     peso del carattere: 400;
    altezza della linea: 1.7 em;
     larghezza massima: 750px;
    }
    h1 {
     dimensione del carattere: 38px;
     peso del carattere: 800;
    }
    

    h2 {
     dimensione del carattere: 34px;
     peso del carattere: 700;
    }
    

    h3 {
     dimensione del carattere: 24px;
     peso del carattere: 700;
    }
    

    un {
     bordo inferiore: 2px solido #bf0d0b;
     colore: #bf0d0b;
     peso del carattere: 700;
    }
    

    un: passa il mouse {
     colore: #F F F;
     sfondo: #bf0d0b;
    }
    forte {
     font-weight: grassetto;
    }
  3. Chiudi e salva il file.
  4. Clicca sul icona a forma di ingranaggio nell'angolo inferiore sinistro dell'interfaccia.
  5. Clicca su Impostazioni.
  6. Clicca su Estensioni poi Ribasso.
  7. Scorri verso il basso fino a Ribasso: stili e fare clic Aggiungi articolo.
  8. Inserisci il percorso del tuo CustomStyles.css file, ad esempio:
    C:\Utenti\Adamo\Stili personalizzati.css
  9. Clic OK.

Una volta che li hai realizzati, dovresti finire con un riquadro di anteprima che assomiglia molto a questo articolo.

Ancora una volta, ho ottenuto questi valori utilizzando lo strumento Inspect Element del mio browser su MUO, ma ti consigliamo di trovare i valori per il tuo sito Web di destinazione.

Temi dell'editor

Il tema VSCode predefinito è disponibile sia in scuro che in chiaro, con versioni ad alto contrasto di ciascuno. Ma come ogni buon editor di codice, ci sono un sacco di fantastici temi di terze parti disponibili.

Se preferisci l'aspetto di un elaboratore di testi rispetto a quello di un editor di codice, ti consiglio il tema Office di huacat:

Se preferisci un editor di codice, temi comuni come Dracula, Gruvbox, Material (vedi screenshot sotto) e Nord sono tutti disponibili dal mercato delle estensioni.

Per installare un nuovo tema:

  1. Clicca sul icona a forma di ingranaggio nell'angolo inferiore sinistro dell'interfaccia.
  2. Clicca su Estensioni.
  3. Cerca uno dei temi sopra menzionati o semplicemente filtra la categoria su temi e sfoglia ciò che è disponibile.

VSCode è l'editor di markdown definitivo?

Quindi, VSCode è l'editor Markdown definitivo per i contenuti web? Fuori dagli schemi, probabilmente no. Ma è estensibile quanto qualsiasi cosa potrebbe essere.

Contatori di parole, correttori ortografici, Copy Markdown come HTML, personalizzazioni in anteprima e temi scalciano la superficie. C'è un ecosistema pieno di estensioni disponibili per VSCode e sei libero di personalizzarlo.