L'intestazione più in alto di una pagina di DevSite deve essere un <h1>
. Il corpo della pagina non deve contenere un altro <h1>
per evitare di confondere i browser non visivi.
Lo strumento nbgenerate
converte i contenuti e i modelli HTML e Markdown di DevSite in blocchi note Jupyter compatibili con Colab.
Dimensioni
Intestazione 1
Intestazione 2
Intestazione 3
Intestazione 4
Intestazione 5
Intestazione 6
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Markdown
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Sommario
In DevSite, <h2>
e <h3>
vengono aggiunti automaticamente all'indice "In questa pagina".
Nascondere le intestazioni dal sommario
Per impedire l'aggiunta di un titolo (ad esempio "Titolo 2" e "Titolo 3" nella sezione precedente, che non compaiono nell'Indice), applica class="hide-from-toc"
.
Intestazione 2
Intestazione 3
HTML
<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>
Markdown
## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}
Personalizzare il testo delle intestazioni nell'Indice
Se vuoi che il testo nell'Indice dei contenuti sia diverso dall'intestazione effettiva (come questa sezione), imposta un attributo data-text
sull'intestazione:
Intestazione 2
HTML
<h2 data-text="Custom text for the ToC">Heading 2</h2>
Markdown
## Heading 2 {: data-text='Custom text for the ToC'}
Includi le intestazioni all'interno delle tabelle nell'Indice
Puoi anche inserire <h2>
o <h3>
all'interno di un'intestazione di tabella (<th>
) per inserire forzatamente la tabella nell'Indice. All'interno di un'intestazione di tabella, <h2>
e <h3>
hanno lo stesso stile del testo normale, quindi i lettori non saranno in grado di distinguerli.
Link da fare clic per copiare
Nelle pagine della documentazione (non quelle "a larghezza intera" come la maggior parte delle pagine di destinazione), le intestazioni diverse da <h1>
dispongono anche di un pulsante per copiare il link, che viene visualizzato solo quando passi il mouse sopra l'intestazione.
Per disattivare questo pulsante per un'intestazione specifica, applica class="no-link"
all'intestazione.
Intestazione 4
Intestazione 5
HTML
<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>
Markdown
## Heading 4 {:.no-link}
### Heading 5 {:.no-link}
Per forzare la visualizzazione del pulsante del link in un'intestazione che altrimenti non lo avrebbe (ad esempio un <h1>
o qualsiasi intestazione in una pagina a larghezza intera), aggiungi class="add-link"
all'intestazione.
Intestazione 1
HTML
<h1 class="add-link">Heading 1</h1>
Markdown
# Heading 1 {:.add-link}
Intestazioni numerate
Per anteporre alle intestazioni <h2>
numeri sequenziali per designare le sezioni con contenuti complessi come passaggi distinti in una procedura in più passaggi, aggiungi una classe numerata a ogni intestazione.
Prima intestazione numerata
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.
Seconda intestazione numerata
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.
Terza intestazione numerata
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.
HTML
<h2 class="numbered">First numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Second numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Third numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Markdown
## First numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Second numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Third numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Sottotitoli numerati
Per anteporre un prefisso alle intestazioni <h3>
che seguono le intestazioni <h2>
con numeri sequenziali, aggiungi una classe numerata a ogni intestazione <h3>
.
HTML
<h2 class="numbered">Numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Markdown
## Numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Intestazione numerata
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.
Sottotitolo numerato
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.
Sottotitolo numerato
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.
Sottotitolo numerato
Contenuti complessi composti da paragrafi, elenchi, tabelle, immagini, video, widget.