Tutorial Markdown in Jupyter Notebook

Intestazioni

Le intestazioni iniziano con "#", cioè il simbolo cancelletto seguito da uno spazio. Esistono sei livelli: l'intestazione più grande usa un solo cancelletto, mentre i titoli più piccoli usano sei cancelleti.

# (Header 1, titolo)

## (Header 2, intestazioni principali)

### (Header 3, sottotitoli)

#### (Header 4)

##### (Header 5)

###### (Header 6)``

In alternativa, le intestazioni possono iniziare con i tag di markup, cioè da h1 a h6 con le seguenti sintassi.

<h1>Header 1,title<h1>
<h2>Header 2,major headings<h2>
<h3>Header 3,subheadings<h3>
<h4>Header 4<h4>
<h5>Header 5<h5>
<h6>Header 6<h6>

Entrambe le sintassi qui sopra renderizzano le intestazioni da h1 a h6 dopo aver cliccato "Run" nella toolbar.

Citazioni

Le citazioni possono contenere blocchi di testo ampi e sono generalmente rientrate. Si ottengono usando il simbolo Markdown ">>" oppure con <blockquote>testo per blockquote</blockquote>

• >This is good
• <blockquote>This is good</blockquote>

Entrambe le sintassi qui sopra renderizzano il testo in forma rientrata dopo aver cliccato "Run" nella toolbar.

Sezione codice

La sezione codice specifica il codice di diversi linguaggi di programmazione e può essere renderizzata dove il codice inline inizia con " `inline code goes here` ", cioè backtick attorno al testo, mentre il blocco di codice inizia con tre backtick " ``` block line code goes here ``` ". Inoltre, il tag di markup per una sezione di codice è " <code>code goes here<code> ".

L'esempio di codice inline è qui sotto:
`x =5`

Dopo aver cliccato "Run" vedrai che il codice inline viene evidenziato.

Esempi di sezione codice:

• Usando Markdown
```Python

str = "This is block level code"

print(str)

```
• Usando i tag di markup
<code>Python

str = "This is a block level code"

print(str)

</code>

Usando Markdown, puoi ottenere l'evidenziazione della sintassi se il nome del linguaggio di programmazione è indicato dopo i tre backtick "```"; l'esempio è qui sotto:

Usando Markdown, non otterrai l'evidenziazione della sintassi, ma il codice è evidenziato:

Simbolo matematico

Il simbolo matematico in Markdown è incluso in '\$ l'espressione matematica va qui \$', racchiuso tra simboli del dollaro; per il markup puoi seguire questo link per maggiori dettagli: Mathematical Operators. Qui sotto puoi vedere un esempio di utilizzo dei simboli matematici.

\$\sqrt{k}$

L'esempio sopra renderizzerà l'espressione matematica in formato grassetto.

Interruzione di riga

Il tag di interruzione di riga inizia con il tag <br> senza tag di chiusura: interrompe la riga e il contenuto rimanente inizia su una nuova riga, come mostrato nell'esempio sotto.

The line breaks after using <br> br tags and it is awesome.
Offerto da

Dopo aver cliccato "Run" nella toolbar, vedrai l'interruzione di riga dopo l'uso del tag <br>. Il testo rimanente parte su una nuova riga.

Testo in grassetto e corsivo

Puoi usare i tag <b>, "**" cioè il doppio asterisco, o "__" cioè il doppio underscore per ottenere il testo in grassetto con la seguente sintassi.

• <b>This is bold text </b>

• ** This is bold text

• __ This is bold text

Tutte le sintassi qui sopra renderizzano il testo in grassetto dopo aver cliccato "Run" nella toolbar.

Puoi usare i tag <i>, "*" cioè un singolo asterisco, o "_" cioè un singolo underscore per ottenere il testo in corsivo con la seguente sintassi.

• <i>This is italic text </i>

• * This is italic text

• _ This is italic text

Tutte le sintassi qui sopra renderizzano il testo in corsivo dopo aver cliccato "Run" nella toolbar.

Linea orizzontale

Puoi ottenere una linea orizzontale usando in Markdown "---" tre trattini oppure i tag di markup <hr>

Entrambe le sintassi qui sopra renderizzeranno la linea orizzontale da un'estremità all'altra dopo aver cliccato "Run".

Elenco ordinato

L'elenco ordinato è un elenco numerato che si ottiene iniziando con il tag <ol> e terminando con </ol>, con gli elementi richiesti racchiusi tra i tag <li> e </li>. Il tag "ol" è l'abbreviazione di ordered list e "li" è l'abbreviazione di list item. Ad esempio, qui sotto puoi vedere un elenco ordinato con gli elementi di una lista della spesa.

<ol>
<li>Fish</li>
<li>Eggs</li>
<li>Cheese</li>
</ol>

In alternativa, puoi elencare con "1. ", cioè il numero richiesto seguito da uno spazio, come nell'esempio seguente.

1. Fish
2. Eggs
3. Cheese

Entrambe le sintassi qui sopra renderizzano l'elenco numerato dopo aver cliccato "Run" nella toolbar.

Elenco non ordinato

L'elenco non ordinato è un elenco puntato che si ottiene usando il tag <ul> e terminando con il tag </ul>, vedi l'esempio qui sotto:

<ul>
<li>Fish</li>
<li>Eggs</li>
<li>Cheese</li>
</ul>

In alternativa, l'elenco non ordinato può iniziare con il simbolo "-" seguito da uno spazio, che genera il simbolo del cerchio nero, e può anche iniziare con il simbolo "*" seguito da uno spazio, che genera il simbolo del quadrato nero.

-   Fish
-   Eggs
-   Cheese

L'esempio sopra mostra l'elenco puntato con il simbolo "-" seguito da uno spazio e dagli elementi, che genera il simbolo del cerchio nero.

Entrambe le sintassi qui sopra possono renderizzare lo stesso risultato in cui gli elementi dell'elenco appaiono con il cerchio nero, dopo aver cliccato "Run" nella toolbar.

Link interni ed esterni

Il link interno in Markdown inizia con il tag <a> con un id univoco definito tramite l'attributo "id", che può essere collegato nel notebook come nell'esempio sotto:

<a id = "division_ID"text goes here></a>

Inoltre, l'id definito sopra può essere collegato alla sezione del notebook con il seguente codice, che rende il link cliccabile.

[Section title](#division_ID)

L'esempio di quanto sopra è visibile sotto, dove l'id definito è collegato con la sezione e si ottiene un link cliccabile dopo aver cliccato "Run" nella toolbar.

Il link esterno in Markdown inizia con <a> e termina con <a>, cioè <a> sta per anchor e definisce il link; ha l'attributo "href", chiamato anche hyper reference, che contiene l'indirizzo di destinazione del link o URL, e il testo tra i tag è visibile e cliccabile per aprire l'indirizzo di destinazione come mostrato sotto.

<a> href="https://www.google.com" >Link to Google</a>

In alternativa, può anche iniziare con __[text link](URL for the site)__ dove il doppio underscore è su entrambi i lati, il testo del link è racchiuso tra parentesi quadre e l'URL del sito è racchiuso tra parentesi tonde.

Link to Google

Entrambe le sintassi qui sopra renderizzano lo stesso risultato seguente, in cui il testo cliccabile e sottolineato porta a una nuova pagina dopo aver cliccato "Run" nella toolbar.

Tabella

La tabella contiene informazioni in righe e colonne ed è costruita combinando "|", cioè il "pipe verticale", per separare ogni colonna, e "-", cioè il trattino, per creare l'intestazione, mentre una riga vuota, cioè una combinazione di pipe verticali e trattini, serve a renderizzare il formato della tabella.

Puoi anche variare le celle allineandole approssimativamente con le colonne, e il notebook ridimensionerà automaticamente il contenuto nella cella indicata.

|Name|Address|Salary| |-----|-------|------| |Hanna|Brisbane|4000| |Adam|Sydney|5000|

In alternativa, si può usare il markup per creare tabelle dove < table > definisce una tabella con la sua larghezza in percentuale. <tr> imposta la riga della tabella, che risulta in grassetto con testo centrato insieme all'intestazione della tabella descritta da <th> in cima alla tabella, mentre le altre voci della tabella sono impostate da <td>, cioè il tag per i dati della tabella.

<table style="width:20%">
<tr>
<th><Name></th>
<th><Address></th>
<th><Salary></th>
</tr>

<tr>
<td><Hanna></td>
<td><Brisbane></td>
<td><4000></td>
</tr>

<tr>
<td><Adam></td>
<td><Sydney></td>
<td><5000></td>
</tr>
</table>

Entrambe le sintassi qui sopra possono renderizzare il medesimo risultato seguente dopo aver cliccato "Run" nella toolbar.

Immagini

Puoi inserire un'immagine dalla toolbar scegliendo "Insert Image" dal menu Edit e selezionare l'immagine desiderata come mostrato sotto.

L'immagine può utilizzare il tag Markdown <img> con l'attributo src, che contiene il link all'immagine, con proprietà opzionali come width e height; l'esempio è qui sotto.

<img> <src="https://i.imgur.com/WWrydEh.png" width ="500" height=500 >

Entrambi i processi qui sopra possono renderizzare la stessa immagine dopo aver cliccato "Run" nella toolbar.

Conclusione

In questo tutorial hai imparato diversi tag di markup, definiti dal linguaggio di markup, e anche la sintassi relativa alle celle Markdown specifiche per il Jupyter Notebook, che si usano accanto al codice per descrivere i contenuti in modo più efficace.

Se vuoi approfondire Markdown, dai un'occhiata a Markdown Guide.