Salta al contenuto principale
  1. Blog/
  2. Categorie/
  3. Markdown/

Come modificare il testo Markdown con l'utilizzo di HTML

·1215 parole·6 minuti· loading · loading ·
markdown tutorial HTML visual code HTML tabelle markdown mermaid atom github tutorial
Indice dei contenuti
Markdown - Questo articolo fa parte di una serie.
Parte 2: Questo Articolo

Barre orizzontali
#

Utilizzate per separare sezioni all’interno di un documento. Per utilizzarle ti basterà inserire 3 o più di questi simboli: asterischi ***, trattini --- oppure underscore ___. Facciamo un esempio utilizzando alcune nozioni viste fino adesso:

## What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

---

### Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Phasellus in lorem eget justo euismod varius.
- Praesent euismod quam a leo hendrerit, eget pretium velit placerat.

Questo è un estratto preso dal sito di generazione di testo utili per quando si vuole inserire del contenuto per verificare che il sito funzioni correttamente. Se vuoi utilizzarlo puoi visitare la pagina Lorem Ipsum.

Nell’esempio abbiamo creato 2 headline con due dimensioni differenti. Tra un paragrafo e l’altro abbiamo inserito una barra orrizontale e alla fine del secondo paragrafo abbiamo un elenco puntato. Il risultato sarà quindi questo:

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Phasellus in lorem eget justo euismod varius.
  • Praesent euismod quam a leo hendrerit, eget pretium velit placerat.

Utilizzo di HTML in markdown
#

Il markdown permette di incorporare HTML direttamente all’interno dei documenti. Utile se si vuole personalizzare ulteriormente la formattazione del testo ma non vi sono funzionalità supportate nativamente.

Un testo di esempio
<p style="color: red;">Questo è un testo di colore rosso utilizzando HTML.</p>

Risultato:

Un testo di esempio

Questo è un testo di colore rosa utilizzando HTML.

Utilizzare HTML in markdown può essere utile per aggiungere stili personalizzati come abbiamo appena visto nell’esempio, di creare tabelle personalizzate come rowspan e colspan.

Tabelle avanzate in HTML
#

<table>
  <tr>
    <th>Intestazione 1</th>
    <th>Intestazione 2</th>
  </tr>
  <tr>
    <td>Riga 1 Col 1</td>
    <td>Riga 1 Col 2</td>
  </tr>
  <tr>
    <td>Riga 2 Col 1</td>
    <td>Riga 2 Col 2</td>
  </tr>
</table>

Risultato:

Intestazione 1Intestazione 2
Riga 1 Col 1Riga 1 Col 2
Riga 2 Col 1Riga 2 Col 2

Collegamenti interni
#

I collegamenti interni sono utili per creare un indice o una navigazione specifica all’interno di un documento molto lungo. Puoi creare facilmente dei collegamenti utilizzando il markdown:

Indice
1. [Sezione 1](#sezione-1)
2. [Sezione 2](sezione-2)

Sezione 1
Il contenuto della sezione 1

Sezione 2
Il contenuto della sezione 2

Risultato:

Indice

Sezione 1 Il contenuto della sezione 1

Sezione 2 Il contenuto della sezione 2


Caratteri Speciali
#

Può capitare di voler utilizzare caratteri speciali all’interno di un documento di testo. Questo tipo di formattazione utilizza però molti caratteri speciali per specifiche funzionalità. Per utilizzare questi caratteri basterà digitare il backslash \ seguito dal carattere. Ecco un esempio utilizzando il simbolo # che viene utilizzato per i titoli:

\# Per mostrare cancelletto

Risultato:

# Per mostrare cancelletto

Estensioni Markdown
#

Esistono diverse estensioni per il Markdown che aggiungono ulteriori funzionalità come ad esempio Github Flavored Markdown oppure CommonMark.

GFM (Github Flavored Markdown) è una estensione utilizzata su Github. Permette di aggiungere funzionalità come task list, tabelle avanzate, mention di utenti e issue.

- [x] Task 1
- [x] Task 2
- [ ] Task 3
- [ ] Task 4

Risultato:

  • Task 1
  • Task 2
  • Task 3
  • Task 4

MathJax per Formule Matematiche
#

MathJax è una estensione basata su LaTex per offrire una sintassi di formattazione per le formule matematiche.

Formula matematica: \( E = mc^2 \)

** Risultato**:

Formula matematica: \( E = mc^2 \)

Mermaid per diagrammi
#

Mermaid consente di creare diagrammi all’interno dei documenti utilizzando una sintassi semplice:

```mermaid
graph TD;
box 1-->box 2;
box 1-->box 3;
box 2-->box 4;
box 3-->box 5;

Risultato:

graph LR; box1[box 1]-->box2[box 2]; box1[box 1]-->box3[box 3]; box2[box 2]-->box4[box 4]; box3[box 3]-->box5[box 5];

Utilizzi e consigli
#

E’ utile comprendere come meglio impostare la formattazione del testo quando si creano documenti, testi o articoli per avere un risultato chiaro, leggibile e professionale. Ecco alcune linee guida che vorrei indicarti.

Formattazione semplice
#

La semplicità è sempre un punto di forza. Evita quindi di complicare eccessivamente la formattazione utilizzando ad esempio troppi grafici o elementi che potrebbero disturbare la lettura

  • Utilizza il grassetto e il corsivo con moderazione
  • tabelle ed elenchi dovrebbero essere utilizzati solo per organizzare informazioni rilevanti e non come decorazione
  • utilizza sempre le immagini come supporto del testo e non come una sostituzione a esso

Commenti
#

Nel testo è possibile inserire dei commenti che saranno visibili solo a te, come accade per gli altri linguaggi di programmazione. Puoi utilizzare questo sistema per dividere il contenuto per i documenti molto lunghi o complessi. Ecco un esempio:

<!-- Informazioni specifiche su argomento X -->
### Un titolo al mio documento
Questo paragrafo contiene informazioni specifiche su un determinato argomento.

<!-- Fine informazioni su specifico argomento X -->

<!-- Rapporto di fine anno e considerazioni -->

### Un altro titolo al mio documento
Paragrafo sul rapporto di fine anno

### Un ulteriore titolo al mio documento 
Paragarfo sulle considerazioni finali

<!-- Fine rapporto di fine anno e considerazioni -->

Denominare i file
#

Organizzare molteplici documenti è fondamentale per trovare facilmente contenuto scritto magari molti anni prima. Trovare dei nomi descrittivi e seguendo delle regole precise sarà facile nell’intento.

  • Descrittivi ma concisi
  • Evita gli spazi e i caratteri speciali
  • Segui una precisa nomenclatura
Scelta dei nomi dei file

- 01032024_progetto-marzo.md
- 01042024_progetto-aprile.md
- 05042024_budget-aprile.md

Strumenti Utili
#

Per utilizzare al meglio il Markdown vediamo insieme gli strumenti utili e le risorse per questo linguaggio.

Editor di testo
#

Per poter utilizzare questo linguaggio dovrai utilizzare un editor di testo che riprodurrà il testo in tempo reale, ti aiuterà nell’autocompletamento o ti evidenzierà la sintassi:

  1. Visual Studio Code: editor di testo open-source di Microsoft molto utilizzato. Consiglio questo editor per il sopporto ad innumerevoli estensioni
  2. Typora: interfaccia minimale e intuitiva ed offre supporto per diagrammi e tabelle
  3. Atom: editor di testo open-source sviluppato da Github, personalizzabile e con numerose estensioni per la scrittura Markdown

Plugin ed estensioni
#

Vediamo alcuni plugin ed estensioni sviluppati per migliorare il supporto per il Markdown.

Markdown All in One
#

Estensione per Visual Studio Code per la formattazione automatica, generazione di tabelle e visualizzazione dell’anteprima

Markdown Preview Enhanced
#

Estensione realizzata per Atom anche qui permette di visualizzare l’anteprima ed esegue formule matematiche con MathJax

Se vuoi maggiori informazioni su MathJax visita il sito ufficiale

Link Utili#

Se vuoi approfondire ulteriormente l’argomento ecco alcune risorse che potrai utilizzare:

Markdown - Questo articolo fa parte di una serie.
Parte 2: Questo Articolo

Related

Guida completa all'utilizzo Markdown
·1118 parole·6 minuti· loading · loading
markdown tutorial HTML formattazione testo guida principiante visual code tabelle markdown markup
Impara il Frontend da Zero: guide e strumenti gratuiti per Principianti
·952 parole·5 minuti· loading · loading
css tutorial Javascript webdev frontend corsi online
Come utilizzare Crypto.com e guadagnare subito
·1041 parole·5 minuti· loading · loading
freelancer tutorial staking trading investimenti Guadagnare Online
Come creare un sito Ecommerce con Shopify
·2102 parole·10 minuti· loading · loading
tutorial ecommerce ecommerce shopify tutorial principianti dropshipping