La semplice sintassi di Markdown lo rende un'ottima alternativa all'HTML. Il linguaggio ha sempre supportato l'incorporamento di HTML, ma ora puoi andare dall'altra parte e incorporare Markdown in HTML.

Utilizzando una semplice libreria, puoi ospitare Markdown incorporato nelle tue pagine Web e convertirlo al volo in HTML corretto.

Cosa fa md-block?

Il tuo attuale processo potrebbe comportare la creazione manuale di file Markdown, quindi la loro conversione in HTML. Ecco quante moderne applicazioni CMS funzionano. Oppure puoi usare un framework come Angolare per rendere Markdown nelle pagine.

La libreria md-block non è strettamente un'alternativa; invece, soddisfa un caso d'uso leggermente diverso. Converte inline Markdown nel suo equivalente HTML. Puoi incorporare Markdown nei tuoi file HTML e renderizzarlo sul client, al momento della richiesta.

Ecco come potrebbe essere:

<html>
<testa>...</head>
<corpo>
<blocco md>
# Intestazione
Alcuni *embedded* Markdown che `md-block` può convertire per te!
</md-block>
</body>
</html>
instagram viewer

È una buona idea allineare a sinistra il codice Markdown incorporato, senza alcun rientro iniziale. Questo perché gli spazi bianchi iniziali possono essere significativi in ​​Markdown, a differenza di HTML.

La libreria introduce il proprio elemento HTML personalizzato, blocco md. Anche se questo elemento non lo è parte dello standard HTML, questa è una tecnica valida. Lo standard dei componenti Web (MDN) include un'API denominata Custom Elements. Questa API supporta la registrazione dinamica di elementi personalizzati utilizzando JavaScript.

Prima di caricare la libreria md-block, questa pagina visualizzerà in modo familiare:

Naturalmente, puoi modellare l'elemento md-block in modo che assomigli di più a un editor di testo. Con uno spazio bianco preformattato e un carattere monospace, è almeno un po' più facile da leggere:

<stile>md-block { spazio bianco: pre; font-family: monospazio; }</style>

Potresti volere questo tipo di output se stai scrivendo un tutorial su Markdown. Ti consente di spiegare la sintassi di Markdown mentre ti consente di modificare facilmente il tuo esempio di Markdown:

Ma il trucco del party di md-block è convertire quel Markdown in HTML finale.

Anche con gli stili di browser predefiniti, il contenuto ora viene visualizzato proprio come il normale HTML, anche se lo hai inviato al browser come Markdown:

Come usare md-block

Dopo aver aggiunto la libreria md-block alla tua pagina, puoi scrivere il tuo Markdown blocco md elementi. La libreria formatterà quindi automaticamente il tuo Markdown e potrai continuare a incorporare Markdown come desideri.

Ci sono, tuttavia, alcune variazioni su questo processo.

Crea lo script in remoto o installalo tu stesso

Il modo più semplice per iniziare è fare riferimento alla libreria dal sito Web ufficiale di md-block:

<tipo di script="modulo" sorgente="https://md-block.verou.me/md-block.js"></script>

Questo potrebbe non essere l'approccio più efficiente, ma è sicuramente il più veloce. Basta aggiungere questo codice al tuo testa e la tua pagina visualizzerà automaticamente qualsiasi cosa in un elemento md-block in HTML:

Ovviamente puoi scaricare quel file JavaScript e ospitarlo sul tuo sito. Oppure puoi installarlo tramite npm:

npm installare md-bloccare

Blocchi di ribasso vs. Ribasso in linea

L'elemento predefinito, che prende il nome dalla libreria stessa, è blocco md. Ma puoi anche usare un md-span elemento per Markdown inline, come il testo nel mezzo di una frase:

Il caso d'uso per inline Markdown è probabilmente meno comune, ma puoi comunque usarlo:

<p>Un paragrafo HTML contenente <md-span>*corsivo*</md-span> testo.</p>

Come sintassi evidenziare i blocchi di codice Markdown con Prism

Prisma è un evidenziatore di sintassi che Lea Verou, creatrice di md-block, ha co-creato. Puoi usarlo per evidenziare i blocchi di codice preformattati in una pagina web, compresi quelli generati da md-block.

Quindi, con questo HTML:

<html>
<corpo>
<blocco md>
```javascript
funzionequadrato(numero) {
Restituzione numero * numero;
}
```
</md-block>
<sorgente dello script="prism.js"></script>
</body>
</html>

Vedrai codice ben formattato con evidenziazione sintatticamente consapevole:

Le tue opzioni per scrivere online sono appena aumentate

Il modo in cui usi md-block dipende da te, ma c'è un sacco di potenziale per soluzioni creative che lo utilizzano. Potresti usarlo per eseguire un CMS molto leggero per gli scrittori che sono sicuri di usare Markdown, ma non HTML.

Markdown è un linguaggio perfetto per un pubblico generale. La sua adozione da parte di strumenti come Slack molto probabilmente aumenterà ulteriormente l'utilizzo.