Markdownsyntax für Wikis

  • Artikel

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019 | TFS 2018

Wichtig

Wählen Sie eine Version aus der Azure DevOps-Inhalts-Versionsauswahl aus.

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 zur lokalen Version, die Sie verwenden, finden Sie unter Suchen ihrer Azure DevOps-Plattform und -Version.

In diesem Artikel finden Sie einige Wiki-spezifische Anleitungen zur Markdownsyntax zur Verwendung in Azure DevOps.

Inhaltsverzeichnis (ToC) für Wiki-Seiten

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

Inhaltsverzeichnis

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

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

Tags für Inhaltsverzeichnis

In der Formatierung in ToC wird die Konsistenz beibehalten.

Hinweis

Beim Tag [[_TOC_]] wird die Groß-/Kleinschreibung beachtet. Beispielsweise kann [[_toc_]] den ToC nicht rendern. Außerdem wird nur die erste Instanz von [[_TOC_]] gerendert, und der Rest wird ignoriert.

Hinzufügen einer Unterseitentabelle

Fügen Sie Ihren Wiki-Seiten ein Inhaltsverzeichnis für Unterseiten (TOSP) hinzu. Diese Tabelle enthält Links zu allen Unterseiten, die sich unter der Seite befinden, auf der die Tabelle der Unterseiten angezeigt wird.

Sie können die Tabelle der Unterseiten hinzufügen, indem Sie das spezielle Tag [[_TOSP_]] manuell einfügen oder im Menü Weitere Optionen auswählen. Nur das erste [[_TOSP_]] Tag wird verwendet, um die Tabelle der Unterseiten zu erstellen.

Screenshot: Markdown für untergeordnete Seiten von Seite 1

Hinzufügen von Meerjungfrauendiagrammen zu einer Wikiseite

Mit Mermaid können Sie Diagramme und Visualisierungen mithilfe von Text und Code erstellen.

Hinweis

  • Nicht alle Syntax in den folgenden verknüpften Inhalten für Diagrammtypen funktioniert in Azure DevOps. Beispielsweise werden die meisten HTML-Tags, Font Awesome, flowchart Syntax (graph stattdessen verwendet) oder LongArrow ---->nicht unterstützt.
  • Meerjungfrau wird im Internet Explorer-Browser nicht unterstützt.
  • Wenn ein "Nicht unterstützter Diagrammtyp" aufgetreten ist, ist die Funktionalität in Ihrer Organisation aufgrund des üblichen Bereitstellungsschemas möglicherweise noch nicht verfügbar.

Wiki unterstützt die folgenden Mermaid-Diagrammtypen:

Weitere Informationen finden Sie in den Versionshinweisen zu Mermaid und aktiven Anforderungen im Entwicklercommunity.

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

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

Sequenzdiagrammbeispiel

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

::: mermaid
sequenceDiagram
    Christie->>Josh: Hello Josh, how are you?
    Josh-->>Christie: Great!
    Christie->>Josh: See you later!
:::

Screenshot: Meerjungfrauensequenz.

Gantt-Diagrammbeispiel

Ein Gantt-Diagramm zeichnet jede geplante Aufgabe als einen kontinuierlichen Balken auf, der sich von links nach rechts erstreckt. Die x-Achse stellt die Zeit dar, und das y zeichnet die verschiedenen Aufgaben und die Reihenfolge auf, in der sie abgeschlossen werden sollen.

Wenn Sie ein Datum, einen Tag oder eine Auflistung von Datumsangaben ausschließen, die für einen Vorgang spezifisch sind, werden diese Änderungen im Gantt-Diagramm berücksichtigt, indem es eine gleiche Anzahl von Tagen nach rechts erweitert und nicht eine Lücke innerhalb der Aufgabe erstellt.

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

Abbildung des Mermaid Live-Editors mit Code und Vorschau für das Gantt-Diagramm.

Flussdiagrammbeispiel

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

Hinweis

Wir unterstützen ----> weder die Syntax noch flowchart 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]
:::

Abbildung des Meerjungfrauen-Live-Editors mit Code und Vorschau für das Flussdiagramm.

Beispiel für ein Klassendiagramm

Das Klassendiagramm ist hauptbestandteil der objektorientierten Modellierung. Das Diagramm beschreibt Objekte, ihre Attribute, Methoden und vererbung zwischen ihnen.

:::mermaid
classDiagram
    Creature <|-- Superman
    Creature <|-- Vampire
    Creature <|-- Diavolo
    Creature: +int size
    Creature: +int weight
    Creature: +isBenign()
    Creature: +power()
    class Superman{
        +String currentName
        +fly()
        +heal()
    }
    class Vampire{
        -int age
        -canBite()
    }
    class Diavolo{
        +bool is_serving
        +heat()
    }
:::

Abbildung des Mermaid Live-Editors mit Code und Vorschau für das Klassendiagramm.

Zustandsdiagrammbeispiel

Das Zustandsdiagramm wird verwendet, um zu beschreiben, wie sich die Systemzustände von einem zu einem anderen ändern können.

:::mermaid
stateDiagram-v2
    [*] --> Active
    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
    }
:::

Screenshot: Meerjungfrauen-Live-Editor mit Code und Vorschau für das Zustandsdiagramm

User Journey-Beispiel

Das User Journey-Diagramm beschreibt, welche Schritte erforderlich sind, um bestimmte Aktionen oder Aufgaben auf höherer Ebene auszuführen.

:::mermaid
journey
    title Home office day
    section Go to work
      Wake up: 1: Me, Dog
      Take shower: 2: Me
      Go downstairs: 3: Me, Dog
      Make coffee: 4: Me
      Have a breakfast: 5: Me, Dog
      Go upstairs: 3: Me, Dog
      Do work: 1: Me, Dog
    section Go home
      Go downstairs: 3: Me, Dog
      Sit down: 5: Me
:::

Screenshot: Rendering des User Journey-Meerjungfrauendiagramms.

Kreisdiagrammbeispiel

Das Kreisdiagramm wird verwendet, um die Prozentwerte in einem kreisförmigen Diagramm zu visualisieren.

:::mermaid
pie title Fishermans in countries
    "Norway" : 684
    "Sweeden" : 234
    "Switzerland" : 10
:::

Screenshot: Mermaid Live Editor mit Code und Vorschau für Kreisdiagramm

Beispiel für anforderungsdiagramm

Das Anforderungsdiagramm visualisiert die Anforderungen und deren Verbindungen.

:::mermaid
requirementDiagram
    requirement development_req {
    id: 1
    text: requirements spec.
    risk: medium
    verifymethod: test
    }
    element test_suite {
    type: manual test
    }
    test_suite - verifies -> development_req
:::

Screenshot: Meerjungfrauen-Live-Editor mit Code und Vorschau für das Anforderungsdiagramm

Hinzufügen eines zusammenklappbaren Abschnitts

Verwenden Sie die folgende Syntax, um einen reduzierbaren Abschnitt zu einer Wikiseite 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: Markdown auf der einen Seite und die Darstellung des zerlegbaren Abschnitts auf der anderen Seite

Stellen Sie sicher, dass Sie in den folgenden Bereichen eine leere Zeile 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 zusammenklappbare Abschnitte vorhanden sind

Einbetten von Videos in eine Wikiseite

Verwenden Sie die folgende Syntax, um Videos von YouTube und Microsoft Streams in eine Wiki-Seite einzubetten:

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

Der IFrame ist der Einbettungs-IFrame-Block des YouTube- oder Microsoft Streams-Videos.

Die Endung ":::" ist erforderlich, um einen Seitenbruch zu verhindern.

Einbetten Azure Boards Abfrageergebnisse in Wiki

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

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

Beispiel:

::: query-table 6ff7777e-8ca5-4f04-a7f6-9e6737dddf7 :::

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

Symbol

Abfrageauswahlbereich

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

@mention Benutzer und Gruppen

Um Benutzer oder Gruppen im Wiki zu @mention verwenden, geben Sie im Wiki-Editor "@" ein. Dadurch @mention wird die automatische Erfassung geöffnet, über die Sie Benutzer oder Gruppen erwähnen können, um per E-Mail benachrichtigt zu werden.

Autosuggest erwähnen

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

Erwähnung aus der Symbolleiste

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

Seitenbesuche für Wiki-Seiten

Automatisch wird auf jeder Seite eine aggregierte Anzahl der Seitenaufrufe für die letzten 30 Tage angezeigt.

Verwenden Sie die Batch-API pagesBatch , um die tägliche Anzahl der Besuche auf allen Seiten paginiert anzuzeigen. Sie werden jedoch nicht nach der Anzahl der Besuche sortiert. Bei Daten, die älter als 30 Tage sind, können Sie alle Seitenbesuche mit 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-Seitenbesuche

Hinweis

Ein Seitenbesuch wird als Seitenansicht eines bestimmten Benutzers in einem Intervall von 15 Minuten definiert.

Link zu Arbeitselementen von einer Wikiseite

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

Hinweis

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

Unterstützung von HTML-Tags auf Wiki-Seiten

Auf Wikiseiten können Sie auch umfangreiche Inhalte mit HTML-Tags erstellen.

Tipp

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

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

Hinweis

Das Einfügen von umfangreichen Inhalten als HTML wird in Azure DevOps Server 2019.1 und höheren 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:

Designansicht

Dunkle Designansicht