Come utilizzare Markdown nello sviluppo Web

Jan 26, 2026
Come si fa

Come sviluppatori Web e creatori di contenuti, generalmente trascorriamo molto tempo a scrivere testo che è avvolto all'interno Html. codice. Cosa succede se ti dicessimo che c'è un modo migliore per farlo con Markdown? Un modo in cui sei stato in grado di concentrarti sulla scrittura e non il codice?

Markdown è un linguaggio semplice, leggero linguaggio markup sviluppato nel 2004 da John Gruber e Aaron Swartz. Originariamente creato per renderlo a scrivere xhtml / html più semplice convertendo i file di testo normale in HTML o XHTML strutturalmente valido, Markdown può essere utilizzato per quasi tutti i tipi di scrittura: manoscritti, tutorial, note, contenuto web e altro ancora.

Sebbene sia relativamente semplice, il markdown può essere un po 'intimidatorio quando inizi prima. Ma una volta che la pensi, ti renderai rapidamente conto di quanto tempo è stato speso la formattazione del tuo codice invece di digitare il tuo contenuto.

01. Scegli un editor di markdown

Quando lavori con Markdown per il web, è importante capire la sintassi e le limitazioni di base che potresti affrontare. Prima di iniziare, hai bisogno di qualche tipo di editor e un interprete per il tuo sito. In alternativa, è possibile convertire il markdown prima di pubblicazione.

You'll need some kind of editor to get started

Avrai bisogno di una specie di editor per iniziare

Ci sono diversi redattori da cui puoi scegliere. Byword. è fantastico perché offre una vasta gamma di opzioni di esportazione, incluso HTML e PDF. Un'altra grande alternativa è Impilabile - Un editor di markdown online gratuito. Naturalmente, qualsiasi editor di testo normale funzionerà.

Jetpack is handy for use with WordPress

Jetpack è utile per l'uso con WordPress

Se non si prevede di convertire il markdown su HTML, è possibile ottenere un plugin (o interruttore) per il tuo sito. Per wordpress, Jetpack. Ha un eccellente supporto per il markdown, che consente di utilizzare il markdown direttamente all'interno di post e commenti - purché abiliti questa opzione.

Come qualsiasi lingua di markup, Markdown ha la sua sintassi. Nota: ci sono un certo numero di diversi sapori o varietà di markdown. In questo articolo, copriremo solo la sintassi comunemente condivisa.

02. Impostare le intestazioni

In HTML, ci sono sei stili di intestazione: H1. , H2. , h3. , H4. , H5. e h6. . Per ricreare questi in Markdown, utilizzare una serie di simboli hashtag ( # ) - Corrispondente al numero di intestazione - seguito dal testo della rubrica. Ad esempio, per creare un & lt; H1 & GT; Tag, usa un hashtag # ; per un & lt; h2 & gt; tag, usa due hashtags ## ; E così via e così via.

Ingresso Markdown: 

 # Heading 1
## Heading 2.
### Heading 3.
#### Heading 4.
##### Heading 5.
###### Heading 6

Uscita HTML: 

 & lt; h1 & gt; intestazione 1 & lt; / h1 & gt;
& lt; h2 & gt; intestazione 2 & lt; / h2 & gt;
& lt; h3 & gt; intestazione 3 & lt; / h3 & gt;
& lt; h4 & gt; intestazione 4 & lt; / h4 & gt;
& lt; h5 & gt; intestazione 5 & lt; / h5 & gt;
& lt; h6 & gt; intestazione 6 & lt; / h6 & gt;

03. Contrassegna i paragrafi

I paragrafi sono rappresentati dal & lt; P & GT; Tag in HTML. In Markdown, sono separati da una o più linee vuote. Come HTML, lo spazio bianco è ignorato. Quindi, se aggiungi 20 linee vuote, avrai ancora solo un paragrafo.

Ingresso Markdown: 

 La rapida volpe marrone salta sopra il cane pigro.
Il cane pigro non si preoccupa, perché è un cane pigro.

Uscita HTML: 

 & lt; P & GT; la volpe marrone veloce salta sopra il cane pigro. & Lt; / P & GT;
& lt; P & GT; il cane pigro non importa, perché è un cane pigro. & lt; / P & GT;

04. Stile le interruzioni della linea

Interruzioni di linea, che sono rappresentate in HTML con il & lt; BR & GT; I tag, vengono aggiunti utilizzando una rottura a riga singola, con due spazi alla fine della linea precedente.

Ingresso Markdown: 

 La volpe marrone veloce
salta sopra il cane pigro.

Uscita HTML: 

 & lt; P & GT; la Quick Brown Fox & Lt; BR & GT; salta sopra il cane pigro. & Lt; / P & GT;

05. Segnare enfasi

Ci sono due modi per aggiungere enfasi al tuo testo: italico ( & lt; em & gt; in HTML) o in grassetto ( & lt; forte e GT; in HTML).

In Markdown, realizza questo usando uno o due asterischi ( * ). Puoi anche usare caratteri di sottolineatura (_), ma mi attacco con gli asterischi, perché ci sono altri sapori di markdown che usano sottolineature per altre cose.

Ingresso Markdown: 

 * Testo italico *
** Testo in grassetto **

Uscita HTML: 

 & lt; EM & GT; ITALIC TESTO & LT; / EM & GT;
& lt; forte & gt; grassetto testo & lt; / forte & gt;

Nota: puoi anche creare testo in grassetto-corsivo usando tre asterischi: *** testo grassetto e corsivo *** .

06. Creare regole orizzontali

Per creare una regola orizzontale (o & lt; hr & gt; In HTML), utilizzare una serie di tre o più trattini ( --- ), asterischi ( *** ) o segni uguali ( ===. ). È tua scelta quale preferisci, ma assicurati di includere una linea vuota sopra e sotto.

Ingresso Markdown: 

 Imparare qualcosa di nuovo è sempre molto divertente.

---

È sicuro!

Uscita HTML: 

 & lt; P & GT; Apprendimento di qualcosa di nuovo è sempre molto divertente. & Lt; / P & GT;
& lt; hr & gt;
& lt; P & GT; è sicuro! & lt; / P & GT;

07. Aggiungi immagini e collegamenti

In HTML, viene aggiunta un'immagine usando il & lt; img & gt; tag e collegamenti vengono aggiunti usando il & lt; A & GT; etichetta.

In Markdown, le immagini iniziano con un punto esclamativo ( ! ), seguito da parentesi quadre ( [] ) per il "testo alt" e parentesi ( () ) Per il percorso dell'immagine. Puoi anche includere un titolo opzionale all'interno delle virgolette doppie ( "" ).

Con i collegamenti, è quasi la stessa cosa, tranne che non c'è punto esclamativo.

Ingresso Markdown: 

! [Alt Text] (/ percorso / to / image.jpg "Titolo opzionale")
[Testo link] (http://example.com "Titolo opzionale")

Nota: puoi anche utilizzare collegamenti e immagini di riferimento, ma non è coperto qui.

Uscita HTML: 

 & lt; img src = "/ percorso / to / image.jpg" alt = "Alt Text" Titolo = "Titolo opzionale" / & GT;
& lt; a href = "http://example.com" Titolo = "Titolo opzionale" e GT; Link Text & Lt; / A & GT;

08. Fai elenchi

Esistono due tipi di elenchi in HTML: ordinato ( & lt; ol & gt; ) e non ordinato ( & lt; UL & GT; ). Con Markdown, utilizzare numeri per elenchi ordinati e asterischi ( * ) o trattini ( - ) Per elenchi non ordinati.

Ingresso Markdown: 

 1. Articolo 1.
2. Articolo 2.
* Primo oggetto
* Secondo articolo
- Primo oggetto
- Secondo elemento

Uscita HTML: 

 & lt; ol & gt;
& lt; Li & GT; Articolo 1 & lt; / Li & GT;
& lt; Li & GT; Articolo 2 & lt; / Li & GT;
& lt; / ol & gt;
& lt; UL & GT;
& lt; li & gt; primo oggetto & lt; / li & gt;
& lt; li & gt; secondo oggetto & lt; / li & gt;
& lt; / UL & GT;
& lt; UL & GT;
& lt; li & gt; primo oggetto & lt; / li & gt;
& lt; li & gt; secondo oggetto & lt; / li & gt;
& lt; / UL & GT;

09. Aggiungi i blocchi di codice e codice in linea

Quando lavori con il codice in HTML, puoi includerlo come elemento in linea usando il & lt; code & gt; tag; o come blocco di testo preformattato usando il & lt; pre & gt; & lt; code & gt; combinazione.

In Markdown, questi elementi sono delimitati utilizzando un singolo backtick su ciascun lato ( ` ); o usando uno stile recintato, che include tre backtick sopra e sotto il blocco di codice ( `` ``.. ).

Ingresso Markdown: 

 La variabile del `numeroofpoint` tiene il punteggio del giocatore.
Se giocatore.wins {
NumeroFpoint + = 1
}

Uscita HTML: 

 The & Lt; Code & GT; NumeroFpoint & Lt; / Code & GT; La variabile tiene il punteggio del giocatore.
& lt; pre & gt; & lt; code & gt;
Se giocatore.wins {
NumeroFpoint + = 1
}
& lt; / pre & gt; & lt; / code & gt;

10. Style Up Blockquotes

I blockQooti vengono aggiunti in HTML usando il & lt; blockquote & gt; etichetta. In Markdown, usa il più grande del simbolo ( & GT; ) Prima della linea.

Ingresso Markdown: 

 & GT; Questo è il mio blocco.
& GT;
& GT; Questo fa parte dello stesso blocco.
& GT; Questo è un nuovo blocco.

Uscita HTML: 

 & lt; Blockquote & GT;
& lt; P & GT; questo è il mio blockquota. & lt; / P & GT;
& lt; BR & GT;
& lt; P & GT; questo fa parte dello stesso blocco. & lt; / P & GT;
& lt; / Blockquote & GT;
& lt; blockquote & gt;
& lt; P & GT; questo è un nuovo blockquota. & lt; / P & GT;
& lt; / Blockquote & GT;

11. Incorpora inline HTML

Ci sono momenti in cui è necessario creare un elemento HTML che non è supportato;Ad esempio, potresti aver bisogno di un & lt; tavolo e GT; o & lt; div & gt; etichetta.

Se questo è il caso, puoi mescolare Markdown e HTML, ma ci sono alcune restrizioni.Ad esempio, non è possibile includere il markdown entro i tag HTML a livello di blocco.

Per saperne di più:

  • 20 moduli node.js che devi sapere
  • 12 domande JavaScript comuni risposte
  • 9 delle migliori risorse per l'apprendimento HTML e CSS

Come si fa - Articoli più popolari

Come costruire un blog con Jekyll

Come si fa Jan 26, 2026

(Credito immagine: rete) Questo tutorial è per le persone che hanno sentito parlare dei generatori di siti statici e..

Dipingi su una maglia 3D con lo strumento Polypaint di Zbrushcore

Come si fa Jan 26, 2026

Polypaint in. Zbrushcore. è uno strumento fantastico che consente di aggiungere colori e trame al modello quando ..

Le regole della reattiva tipografia Web

Come si fa Jan 26, 2026

La tipografia Web reattiva è dura, è necessario avere entrambe le costolette di design e il know-how tecnico. Ma comunque complicato potrebbe essere, ottenendo che non è sbagliato non è u..

Master lo strumento Bridge

Come si fa Jan 26, 2026

Qual è lo strumento bridge? Se sei nuovo per CGI ci sono troppi strumenti da scegliere in una matrice di software ..

Come disegnare una figura bagnata

Come si fa Jan 26, 2026

Per dipingere una figura che sembra credibilmente bagnata richiede di tenere conto di un numero di fattori - una chiave è il tip..

Come dipingere il vetro curvo su un casco spaziale

Come si fa Jan 26, 2026

I subiti sono divertenti da dipingere, ma la parte del casco può essere complicata per avere diritto, specialmente l'elemento di..

Costruisci un semplice lettore musicale con reagire

Come si fa Jan 26, 2026

Reagire è una popolare libreria JavaScript per la costruzione di interfacce utente, e in questo tutorial ti mostrer�..

Boost D3.js Charts con SVG Gradients

Come si fa Jan 26, 2026

Nadieh Bremer sarà a Genera Londra. A settembre, dove dimostrerà come prendere ..

Categorie