Linee guida sulla sintassi per l'utilizzo di Markdown in Wiki

Azure DevOps Services | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018

Importante

Select a version from Azure DevOps Content Version selector.

Per visualizzare il contenuto disponibile per la piattaforma, assicurarsi di selezionare la versione corretta di questo articolo dal selettore di versione che si trova sopra il sommario. Il supporto delle funzionalità è diverso a seconda che si funzioni da Azure DevOps Services o da una versione locale di Azure DevOps Server, rinominata da Team Foundation Server (TFS).
Per informazioni sulla versione locale in uso, vedere Quale piattaforma/versione si sta usando?

In questo articolo trovare alcune indicazioni sulla sintassi Markdown specifiche di Wiki per l'uso in Azure DevOps.

Sommario (TOC) per le pagine Wiki

Per creare un sommario, aggiungere un oggetto [[_TOC_]]. Il toC viene generato quando il tag viene aggiunto e nella pagina è presente almeno un titolo.

Table of contents

[[_TOC_]] può essere posizionato ovunque nella pagina per eseguire il rendering del sommario. Solo le intestazioni Markdown vengono considerate per TOC (i tag di intestazione HTML non vengono considerati).

Tutti i tag HTML e Markdown vengono rimossi dalle intestazioni mentre lo aggiungono all'interno del blocco TOC. Vedere l'esempio seguente di come viene eseguito il rendering dell'applicazione livello dati quando si aggiungono grassetto e corsivo a un'intestazione.

Tags for TOC

La coerenza viene mantenuta nella formattazione in TOC.

Nota

Il tag [[_TOC_]] è distinzione tra maiuscole e minuscole. Ad esempio, [[_toc_]] potrebbe non eseguire il rendering del toc. Inoltre, viene eseguito il rendering solo della prima istanza di [[_TOC_]] e il resto viene ignorato.

Aggiungere diagrammi Mermaid a una pagina Wiki

Mermaid consente di creare diagrammi e visualizzazioni usando testo e codice. Wiki supporta i tipi di diagramma Mermaid seguenti:

Nota

  • Non tutte le sintassi nel contenuto collegato precedentemente per i tipi di diagramma funzionano in Azure DevOps. Ad esempio, la maggior parte dei tag HTML, Font Awesome o LongArrow ---->non è supportata.
  • Mermaid non è supportato nel browser Internet Explorer.

Per aggiungere un diagramma Mermaid a una pagina wiki, usare la sintassi seguente:

::: mermaid
<mermaid diagram syntax>
:::

Esempio di diagramma sequenza

Un diagramma di sequenza è un diagramma di interazione che mostra come i processi operano tra loro e in quale ordine.

::: mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
:::

.

Esempio di grafico Gantt

Un grafico Gantt registra ogni attività pianificata come una barra continua che si estende da sinistra a destra. L'asse x rappresenta l'ora e l'y registra le diverse attività e l'ordine in cui devono essere completati.

Quando si esclude una data, un giorno o una raccolta di date specifiche di un'attività, il grafico Gantt supporta tali modifiche estendendo un numero uguale di giorni verso destra, non creando un gap all'interno dell'attività.

::: mermaid
gantt
    title A Gantt chart
    dateFormat YYYY-MM-DD
    excludes 2022-03-16,2022-03-18,2022-03-19
    section Section

    A task          :a1, 2022-03-07, 7d
    Another task    :after a1 , 5d
:::

image showing the Mermaid Live Editor with code and preview for Gantt chart.

Esempio di diagramma di flusso

Un diagramma di flusso è costituito da nodi, forme geometriche e bordi e frecce o linee. Nell'esempio seguente viene illustrato un diagramma di flusso usando graph anziché flowchart.

Nota

Non è supportata ---->flowchart sintassi né collegamenti a e da subgraph.

:::mermaid
graph LR;
    A[Hard edge] -->|Link text| B(Round edge) --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
:::

image showing the Mermaid Live Editor with code and preview for flowchart.

Aggiungere una sezione collapsible

Per aggiungere una sezione collapsible in una pagina wiki, usare la sintassi seguente:

# A collapsible section with markdown
<details>
  <summary>Click to expand!</summary>

  ## Heading
  1. A numbered
  2. list
     * With some
     * Sub bullets
</details>

Screenshot showing markdown on one side and how the collapsible section renders on the other.

Assicurarsi di aggiungere una riga vuota nelle aree seguenti:

  • dopo il tag di chiusura </summary> , altrimenti i blocchi markdown/code non vengono visualizzati correttamente
  • dopo il tag di chiusura </details> se sono presenti più sezioni di confronto

Incorporare video in una pagina Wiki

Per incorporare video da YouTube e Microsoft Flussi in una pagina wiki, usare la sintassi seguente:

::: video
<iframe width="560" height="315" src="https://www.youtube.com/embed/OtqFyBA6Dbk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
:::

Il iframe è il blocco iframe di incorporamento del video YouTube o Microsoft Flussi.

Risultato:

(La fine ":::" è necessaria per evitare un'interruzione nella pagina)

Incorpora Azure Boards risultati della query in Wiki

Per incorporare Azure Boards risultati della query in una pagina wiki come tabella, usare la sintassi seguente:

::: query-table <queryid>
:::

Ad esempio:

::: query-table 6ff77777e-8ca5-4f04-a7f6-9e63737dddf7 :::

È anche possibile usare la barra degli strumenti e il selettore di query per incorporare i risultati della query in una pagina wiki.

Query Results Icon

Query Selector Pane

Per altre informazioni su come copiare l'URL della query, che fornisce un GUID per la query, vedere Elementi di query di posta elettronica o condividere l'URL di query.

@mention utenti e gruppi

Per @mention utenti o gruppi in wiki, chiave in "@" nell'editor wiki. Verrà @mention visualizzata la funzionalità di inserimento automatico, da cui è possibile menzionare utenti o gruppi per ricevere una notifica tramite posta elettronica.

Mention Autosuggest

È anche possibile selezionare "@mention" dalla barra degli strumenti di modifica.

Mention from edit toolbar

Quando si modificano le pagine direttamente nel codice, usare il modello seguente, @<{identity-guid}>.

Visite di pagine per le pagine wiki

Viene visualizzato automaticamente un conteggio delle visite di pagina aggregato per gli ultimi 30 giorni in ogni pagina.

Usare l'API pagesBatch batch per visualizzare la quantità giornaliera di visite a tutte le pagine in modo impaginato. Non sono ordinati in base al numero di visite, tuttavia. Per i dati di oltre 30 giorni, è possibile ottenere tutte le visite di pagina usando l'API rest. Ordinare queste pagine in base al numero di visite per ottenere i primi 100. È possibile archiviare queste visite in un dashboard o in un database.

Wiki page visits

Nota

Una visita di pagina viene definita come visualizzazione di pagina da parte di un determinato utente in un intervallo di 15 minuti.

Immettere il segno di sterlina (#) e quindi immettere un ID elemento di lavoro.

Nota

Questa funzionalità è disponibile con TFS 2018.2 e versioni successive.

Supporto tag HTML nelle pagine wiki

Nelle pagine wiki è anche possibile creare contenuti avanzati usando tag HTML.

Suggerimento

È possibile annidare Markdown all'interno del codice HTML, ma è necessario includere una riga vuota tra l'elemento HTML e il markdown.

<p>
 
 [A Markdown link](https://microsoft.com) 
</p>

Nota

Incollando contenuto avanzato come HTML è supportato in Azure DevOps Server 2019.1 e versioni successive.

Esempio - Video incorporato

<video src="path of the video file" width=400 controls>
</video>
<video src="https://sec.ch9.ms/ch9/7247/7c8ddc1a-348b-4ba9-ab61-51fded6e7247/vstswiki_high.mp4" width=400 controls>
</video>

Risultato:

Esempio - Formato di testo avanzato

<p>This text needs to <del>strikethrough</del> <ins>since it is redundant</ins>!</p>
<p><tt>This text is teletype text.</tt></p>
<font color="blue">Colored text</font>
<center>This text is center-aligned.</center>
<p>This text contains <sup>superscript</sup> text.</p>
<p>This text contains <sub>subscript</sub> text.</p>
<p>The project status is <span style="color:green;font-weight:bold">GREEN</span> even though the bug count / developer may be in <span style="color:red;font-weight:bold">red.</span> - Capability of span
<p><small>Disclaimer: Wiki also supports showing small text</small></p>
<p><big>Bigger text</big></p>

Risultato:

Light theme view

Dark theme view