Syntax-Leitfaden für die Markdownverwendung in Wiki

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

Wichtig

Select a version from Azure DevOps Content Version selector.

Um den für Ihre Plattform verfügbaren Inhalt anzuzeigen, stellen Sie sicher, dass Sie die richtige Version dieses Artikels aus der Versionsauswahl auswählen, die sich oberhalb des Inhaltsverzeichnisses befindet. Die Funktionsunterstützung variiert abhängig davon, ob Sie mit Azure DevOps Services oder einer lokalen Version von Azure DevOps Server arbeiten, die von Team Foundation Server (TFS) umbenannt wurde.
Informationen, wie Sie herausfinden, welche lokale Version Sie verwenden, finden Sie unter Welche Plattform/Version verwende ich?

In diesem Artikel finden Sie einige wikispezifische Markdown-Syntaxanleitungen für die Verwendung in Azure DevOps.

Inhaltsverzeichnis (Inhaltsverzeichnis) für Wiki-Seiten

Um ein Inhaltsverzeichnis zu erstellen, fügen Sie ein [[_TOC_]]-Objekt hinzu. Das Inhaltsverzeichnis wird generiert, wenn das Tag hinzugefügt wird und mindestens eine Überschrift auf der Seite vorhanden ist.

Table of contents

Das [[_TOC_]] kann an einer beliebigen Stelle auf der Seite platziert werden, um das Inhaltsverzeichnis zu rendern. Nur Markdownüberschriften werden für TOC betrachtet (HTML-Überschriftentags werden nicht berücksichtigt).

Alle HTML- und Markdown-Tags werden von den Überschriften entfernt, während sie innerhalb des Inhaltsverzeichnisblocks hinzugefügt werden. Sehen Sie sich das folgende Beispiel an, wie das Inhaltsverzeichnis gerendert wird, wenn Sie fett und kursiv zu einer Überschrift hinzufügen.

Tags for TOC

Die Konsistenz wird in der Formatierung in TOC beibehalten.

Hinweis

Das Tag [[_TOC_]] ist groß- und kleinschreibungsempfindlich. [[_toc_]] kann beispielsweise nicht das Inhaltsverzeichnis rendern. Außerdem wird nur die erste Instanz von [[_TOC_]] gerendert, und der Rest wird ignoriert.

Hinzufügen von Mermaid-Diagrammen zu einer Wiki-Seite

Mit Mermaid können Sie Diagramme und Visualisierungen mithilfe von Text und Code erstellen. Wiki unterstützt die folgenden Mermaid-Diagrammtypen:

Hinweis

  • Nicht alle Syntax im zuvor verknüpften Inhalt für Diagrammtypen funktioniert in Azure DevOps. Beispielsweise unterstützen wir die meisten HTML-Tags, Font Awesome oder LongArrow ---->nicht.
  • Mermaid wird im Internet Explorer-Browser nicht unterstützt.

Verwenden Sie die folgende Syntax, um einer Wiki-Seite ein Mermaid-Diagramm hinzuzufügen:

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

Beispiel für Sequenzdiagramm

Ein Sequenzdiagramm ist ein Interaktionsdiagramm, das zeigt, wie Prozesse miteinander funktionieren und in welcher Reihenfolge.

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

.

Gantt-Diagrammbeispiel

Ein Gantt-Diagramm zeichnet jeden geplanten Vorgang als einen fortlaufenden Balken auf, der sich von links nach rechts erstreckt. Die x-Achse stellt Zeit dar, und die y zeichnet die verschiedenen Aufgaben und die Reihenfolge auf, in der sie abgeschlossen werden sollen.

Wenn Sie ein Datum, einen Tag oder eine Sammlung von Datumsangaben ausschließen, die für einen Vorgang spezifisch sind, passt das Gantt-Diagramm diese Änderungen an, indem sie eine gleiche Anzahl von Tagen nach rechts erweitern, nicht durch Erstellen einer Lücke innerhalb des Vorgangs.

::: 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.

Flussdiagrammbeispiel

Ein Flussdiagramm besteht aus Knoten, geometrischen Formen und Kanten sowie Pfeilen oder Linien. Das folgende Beispiel zeigt ein Flussdiagramm anstelle graph von flowchart.

Hinweis

Wir unterstützen ----> oder flowchart verwenden keine Links zu und von 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.

Hinzufügen eines zusammensetzbaren Abschnitts

Verwenden Sie die folgende Syntax, um einen zusammensetzbaren Abschnitt in einer Wiki-Seite hinzuzufügen:

# 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.

Stellen Sie sicher, dass Sie eine leere Zeile in den folgenden Bereichen hinzufügen:

  • nach dem schließenden </summary> Tag, andernfalls werden die Markdown-/Codeblöcke nicht ordnungsgemäß angezeigt.
  • nach dem schließenden </details> Tag, wenn mehrere zusammensetzbare Abschnitte vorhanden sind

Einbetten von Videos auf einer Wiki-Seite

Um Videos aus YouTube und Microsoft Streams auf einer Wiki-Seite einzubetten, verwenden Sie die folgende Syntax:

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

Das iframe ist der Einbettungs-iframe-Block von YouTube oder Microsoft Streams Video.

Ergebnis:

(Das Ende ":::" ist erforderlich, um einen Umbruch auf der Seite zu verhindern)

Einbetten Azure Boards Abfrageergebnisse in Wiki

Verwenden Sie die folgende Syntax, um Azure Boards Abfrageergebnisse in eine Wiki-Seite als Tabelle einzubetten:

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

Zum Beispiel:

::: abfragetabelle 6ff7777e-8ca5-4f04-a7f6-9e63737dddf7 :::

Sie können auch die Symbolleiste und die Abfrageauswahl verwenden, um die Abfrageergebnisse in eine Wiki-Seite einzubetten.

Query Results Icon

Query Selector Pane

Weitere Informationen zum Kopieren der Abfrage-URL, die eine GUID für die Abfrage bereitstellt, finden Sie unter E-Mail-Abfrageelemente oder Freigabeabfrage-URL.

@mention Benutzer und Gruppen

Wenn @mention Sie Benutzer oder Gruppen in Wiki verwenden möchten, drücken Sie im Wiki-Editor den Schlüssel in "@". Dadurch @mention wird das Autouggest geöffnet, von dem Sie Benutzer oder Gruppen erwähnen können, um per E-Mail benachrichtigt zu werden.

Mention Autosuggest

Sie können auch auf der Bearbeitungssymbolleiste "@mention" auswählen.

Mention from edit toolbar

Wenn Sie Seiten direkt im Code bearbeiten, verwenden Sie das folgende Muster. @<{identity-guid}>

Seitenbesuche für Wiki-Seiten

Automatisch wird die Anzahl der aggregierten Seitenbesuche für die letzten 30 Tage auf jeder Seite angezeigt.

Verwenden Sie die Batch-API pagesBatch , um die tägliche Anzahl der Besuche auf allen Seiten auf paginierte Weise anzuzeigen. Sie werden jedoch nicht nach Anzahl der Besuche sortiert. Für Daten, die älter als 30 Tage sind, können Sie alle Seitenbesuche mithilfe der Rest-API abrufen. Sortieren Sie diese Seiten basierend auf der Anzahl der Besuche, um die top 100 zu erhalten. Sie können diese Besuche in einem Dashboard oder einer Datenbank speichern.

Wiki page visits

Hinweis

Ein Seitenbesuch wird als Seitenansicht durch einen bestimmten Benutzer in einem 15-minütigen Intervall definiert.

Geben Sie das Pfundzeichen (#) ein, und geben Sie dann eine Arbeitselement-ID ein.

Hinweis

Dieses Feature ist mit TFS 2018.2 und höher verfügbar.

HTML-Tagunterstützung auf Wiki-Seiten

In Wiki-Seiten können Sie auch umfangreiche Inhalte mithilfe von HTML-Tags erstellen.

Tipp

Sie können Markdown in Ihrem HTML-Code verschachteln, müssen jedoch eine leere Zeile zwischen dem HTML-Element und dem Markdown einschließen.

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

Hinweis

Das Einfügen von rich content as HTML wird in Azure DevOps Server 2019.1 und höher versionen unterstützt.

Beispiel – Eingebettetes Video

<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>

Ergebnis:

Beispiel : Rich-Text-Format

<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>

Ergebnis:

Light theme view

Dark theme view