Menggunakan Markdown di Azure DevOps

Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019

Penting

Pilih versi dari pemilih Versi Konten Azure DevOps.

Pilih versi artikel ini yang sesuai dengan platform dan versi Anda. Pemilih versi berada di atas daftar isi. Cari platform dan versi Azure DevOps Anda.

Dalam artikel ini, temukan panduan sintaks dasar untuk menggunakan Markdown di fitur Azure DevOps dan wiki Markdown. Anda dapat menggunakan konvensi Markdown umum dan ekstensi rasa GitHub.

Gunakan Markdown untuk menambahkan pemformatan, tabel, gambar, dan lainnya ke halaman proyek Anda, file README, dasbor, permintaan pull, wiki, dan sebagainya.

Tidak semua sintaks Markdown didukung di semua fitur di Azure DevOps. Tabel berikut ini menautkan ke setiap bagian sintaks dasar dalam artikel ini dan menyoroti fitur mana yang mendukungnya.

Jenis markdown Fitur yang didukung
Header Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, README, wiki
Paragraf dan hentian baris Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Blockquotes Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Aturan horizontal Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Penekanan Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Penyorotan kode permintaan pull, file README, wiki
Sarankan perubahan permintaan pull
Tabel Widget markdown, permintaan penarikan, file README, wiki
Daftar Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Tautan Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Citra Widget markdown, permintaan penarikan, file README, wiki
Daftar periksa atau daftar tugas permintaan pull, wiki
Emoji permintaan pull, wiki
Mengabaikan atau menghindari sintaks Markdown Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, wiki
Lampiran permintaan pull, wiki
Notasi dan karakter matematika permintaan pull, wiki

Untuk informasi selengkapnya, lihat Definisi Selesai (papan Kanban), widget Markdown, permintaan pull, file README, dan wiki.

Header

Menyusun konten Anda menggunakan header. Header mensegmentasi konten yang lebih panjang, sehingga lebih mudah dibaca.

Mulai baris dengan karakter # hash untuk mengatur judul. Atur komentar Anda dengan subjudul dengan memulai baris dengan lebih banyak karakter hash, misalnya, ####. Anda dapat menggunakan hingga enam tingkat judul.

Contoh:

# This is a H1 header
## This is a H2 header
### This is a H3 header
#### This is a H4 header
##### This is a H5 header

Hasil:

Cuplikan layar portal Web, header 1 hingga 5.

Paragraf dan hentian baris

Didukung dalam: Definisi Selesai | Widget markdown | Permintaan Pull | File README | Wiki

Jadikan teks Anda lebih mudah dibaca dengan memecahnya menjadi paragraf atau pemisah baris.

Permintaan pull

Di komentar permintaan pull, pilih Enter untuk menyisipkan pemisah baris dan memulai teks pada baris baru.

Contoh - komentar permintaan pull:

Add lines between your text with the **Enter** key.
Your text gets better spaced and makes it easier to read.

Hasil:

Tambahkan baris di antara teks Anda dengan tombol Enter .

Teks Anda mendapat spasi yang lebih baik dan membuatnya lebih mudah dibaca.

File markdown atau widget

Dalam file markdown atau widget, masukkan dua spasi sebelum pemisah baris, lalu pilih Enter untuk memulai paragraf baru.

Contoh - File markdown atau widget:

Add two spaces before the end of the line, and then select **Enter**.(space, space, Enter)
A space gets added in between paragraphs.

Hasil:

Tambahkan dua spasi sebelum akhir baris, lalu pilih Enter.

Spasi ditambahkan di antara paragraf.

Blockquotes

Kutip komentar atau teks sebelumnya untuk mengatur konteks komentar atau teks Anda. Kutip satu baris teks dengan > sebelum teks. Gunakan banyak > karakter untuk menumpuk teks yang dikutip. Blok kutipan baris teks dengan menggunakan tingkat yang sama di > banyak baris.

Contoh:

> Single line quote
>> Nested quote
>> multiple line
>> quote

Hasil:

Cuplikan layar Kutipan di Markdown.

Aturan horizontal

Untuk menambahkan aturan horizontal, tambahkan garis yang merupakan serangkaian tanda hubung ---. Baris di atas baris yang --- berisi harus kosong.

Contoh:

above
 
----
below

Hasil:

Atas


di bawah

Penekanan (tebal, miring, coretan)

Didukung dalam: Definisi Selesai | Widget markdown | Permintaan Pull | File README | Wiki

Anda dapat menekankan teks dengan menerapkan tebal, miring, atau coretan ke karakter:

  • Untuk menerapkan miring: kelilingi teks dengan tanda bintang * atau garis bawah _
  • Untuk menerapkan tebal: kelilingi teks dengan tanda bintang **ganda .
  • Untuk menerapkan coretan: kelilingi teks dengan karakter ~~tilde ganda .

Gabungkan elemen-elemen ini untuk menerapkan penekanan pada teks.

Catatan

Tidak ada sintaks Markdown yang mendukung teks garis bawah. Dalam halaman wiki, Anda dapat menggunakan tag HTML <u> untuk menghasilkan teks bergaris bawah. Misalnya, <u>underlined text</u> menghasilkan teks bergaris bawah.

Contoh:

Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~  
**_Bold, italicized text_**  
**~~Bold, strike-through text~~**

Hasil:

Gunakan penekanan dalam komentar untuk mengekspresikan pendapat yang kuat dan menunjukkan koreksi
Teks tebal dan miringTebal, teks coretan

Penyorotan kode

Sorot segmen kode yang disarankan menggunakan blok sorotan kode. Untuk menunjukkan rentang kode, bungkus dengan tiga tanda kutip backtick (```) pada baris baru di awal dan akhir blok. Untuk menunjukkan kode sebaris, bungkus dengan satu kutipan backtick (`).

Penyorotan kode yang dimasukkan dalam widget Markdown merender kode sebagai teks yang telah diformat sebelumnya.

Contoh:

```
sudo npm install vsoagent-installer -g  
```

Hasil:

sudo npm install vsoagent-installer -g

Contoh:

```To install the Microsoft Cross Platform Build & Release Agent, run the following: `$ sudo npm install vsoagent-installer -g`.``` 

Hasil:

To install the Microsoft Cross Platform Build & Release Agent, run the following command: `$ sudo npm install vsoagent-installer -g`.


Dalam file Markdown, teks dengan empat spasi di awal baris secara otomatis dikonversi ke blok kode.

Atur pengidentifikasi bahasa untuk blok kode untuk mengaktifkan penyorotan sintaks untuk salah satu bahasa yang didukung dalam highlightjs.

``` language
code
```

Contoh lainnya:

``` js
const count = records.length;
```
const count = records.length;

``` csharp
Console.WriteLine("Hello, World!");
```
Console.WriteLine("Hello, World!");

Sarankan perubahan

Dalam permintaan pull, Anda dapat menggunakan komentar untuk menyarankan teks pengganti untuk satu atau beberapa baris dalam file. Pengguna dapat dengan mudah menerapkan perubahan yang disarankan dengan memilih Terapkan Perubahan. Tindakan ini menghasilkan penerapan perubahan pada permintaan pull.

Penyorotan kode yang dimasukkan dalam widget Markdown merender kode dalam format berbeda dengan baris yang diawali oleh '-' dan '+'.

Contoh:

```suggestion
  for i in range(A, B+100, C):
```

Cuplikan layar memperlihatkan contoh perubahan yang disarankan dalam permintaan pull.

Untuk informasi selengkapnya, lihat Menyarankan perubahan dalam komentar.

Tabel

Menata data terstruktur dengan tabel. Tabel sangat berguna untuk menjelaskan parameter fungsi, metode objek, dan data lainnya dengan nama yang jelas untuk pemetaan deskripsi.

  • Tempatkan setiap baris tabel pada barisnya sendiri.
  • Pisahkan sel tabel menggunakan karakter |pipa .
  • Untuk menggunakan karakter pipa dalam tabel, Anda harus melarikan diri dengan garis miring terbelakang \|.
  • Dua baris pertama tabel mengatur header kolom dan perataan elemen dalam tabel.
  • Gunakan titik dua (:) saat memba merupakan header dan isi tabel untuk menentukan perataan kolom (kiri, tengah, kanan).
  • Untuk memulai baris baru, gunakan tag pemisah HTML () (<br/>berfungsi dalam Wiki tetapi tidak di tempat lain).
  • Pastikan untuk mengakhiri setiap baris dengan CR atau LF.
  • Anda harus memasukkan spasi kosong sebelum dan sesudah item kerja atau permintaan pull (PR) yang disebutkan di dalam sel tabel.

Contoh:

| Heading 1 | Heading 2 | Heading 3 |  
|-----------|:-----------:|-----------:|  
| Cell A1 | Cell A2 | Cell A3 |  
| Cell B1 | Cell B2 | Cell B3<br/>second line of text |  

Hasil:

Judul 1 Judul 2 Judul 3
Sel A1 Sel A2 Sel A3
Sel B1 Sel B2 Sel B3
baris kedua teks

Daftar

Gunakan daftar untuk menata item terkait. Anda dapat menambahkan daftar berurutan dengan angka atau daftar yang tidak diurutkan hanya dengan poin. Daftar berurutan dimulai dengan angka diikuti dengan titik untuk setiap item daftar. Daftar yang tidak diurutkan dimulai dengan -.

Mulai setiap item daftar pada baris baru. Dalam file markdown atau widget, masukkan dua spasi sebelum hentian baris untuk memulai paragraf baru atau masukkan dua hentian baris secara berturut-turut untuk memulai paragraf baru.

Daftar berurutan atau bernomor

Contoh:

1. First item.
1. Second item.
1. Third item.

Hasil:

  1. Item pertama.
  2. Item kedua.
  3. Item ketiga.

Daftar berpoin

Contoh:

- Item 1
- Item 2
- Item 3

Hasil:

  • Item 1
  • Item 2
  • Item 3

Daftar bertumpuk

Contoh:

1. First item.
   - Item 1
   - Item 2
   - Item 3
1. Second item.
   - Nested item 1
      - Further nested item 1
      - Further nested item 2
      - Further nested item 3
   - Nested item 2
   - Nested item 3

Hasil:

  1. Item pertama.
    • Item 1
    • Item 2
    • Item 3
  2. Item kedua.
    • Item berlapis 1
      • Item berlapis lebih lanjut 1
      • Item berlapis lebih lanjut 2
      • Item berlapis lebih lanjut 3
    • Item berlapis 2
    • Item berlapis 3

Dalam komentar permintaan pull dan wiki, URL HTTP dan HTTPS secara otomatis diformat sebagai tautan. Anda dapat menautkan ke item kerja dengan memasukkan # kunci dan ID item kerja lalu memilih item kerja dari daftar.

Hindari saran otomatis untuk item kerja dengan awalan # dengan garis miring terbalik (\). Tindakan ini dapat berguna jika Anda ingin menggunakan # untuk kode heksa warna.

Di File markdown dan widget, Anda dapat mengatur hyperlink teks untuk URL Anda menggunakan sintaks tautan Markdown standar:

[Link Text](Link URL)

Saat Anda menautkan ke halaman Markdown lain di repositori Git atau TFVC yang sama, target tautan dapat menjadi jalur relatif atau jalur absolut di repositori.

Tautan yang didukung untuk halaman Selamat Datang:

  • Jalur relatif: [text to display](target.md)
  • Jalur absolut di Git: [text to display](/folder/target.md)
  • Jalur absolut di TFVC: [text to display]($/project/folder/target.md)
  • URL: [text to display](http://address.com)

Tautan yang didukung untuk widget Markdown:

  • URL: [text to display](http://address.com)

Tautan yang didukung untuk Wiki:

  • Jalur absolut halaman Wiki: [text to display](/parent-page/child-page)
  • URL: [text to display](http://address.com)

Catatan

  • Tautan ke dokumen pada berbagi file menggunakan file:// tidak didukung pada versi 2017.1 dan yang lebih baru. Pembatasan ini telah diterapkan untuk tujuan keamanan.
  • Untuk informasi tentang cara menentukan tautan relatif dari halaman Selamat Datang atau widget Markdown, lihat Tautan relatif kontrol sumber.

Contoh:

[C# language reference](/dotnet/csharp/language-reference/)

Hasil:

Referensi bahasa C#

Tautan ke file kontrol sumber ditafsirkan secara berbeda tergantung pada apakah Anda menentukannya di halaman Selamat Datang atau widget Markdown. Sistem menafsirkan tautan relatif sebagai berikut:

  • Halaman selamat datang: Relatif terhadap akar repositori kontrol sumber tempat halaman selamat datang ada
  • Widget markdown: Relatif terhadap basis URL pengumpulan proyek tim

Contohnya:

Halaman selamat datang Widget markdown setara
/BuildTemplates/AzureContinuousDeploy.11.xaml /DefaultCollection/Fabrikam Fiber/_versionControl#path=$/Tfvc Welcome/BuildTemplates/AzureContinuousDeploy.11.xaml
./page-2.md /DefaultCollection/Fabrikam Fiber/_versionControl#path=$/Tfvc Welcome/page-2.md

Dalam file Markdown, ID jangkar ditetapkan ke semua judul saat dirender sebagai HTML. ID adalah teks judul, dengan spasi digantikan oleh tanda hubung (-) dan semua huruf kecil. Secara umum, konvensi berikut berlaku:

  • Tanda baca dan spasi putih di depan dalam nama file diabaikan
  • Huruf besar dikonversi ke huruf kecil
  • Spasi antar huruf dikonversi menjadi tanda hulu (-)

Contoh:

###Link to a heading in the page

Hasil:

Sintaks untuk tautan jangkar ke bagian...

[Link to a heading in the page](#link-to-a-heading-in-the-page)

ID semuanya huruf kecil, dan tautan peka huruf besar/kecil, jadi pastikan untuk menggunakan huruf kecil, meskipun judul itu sendiri menggunakan huruf besar.

Anda juga dapat mereferensikan judul dalam file Markdown lain:

[text to display](./target.md#heading-id)  

Di wiki, Anda juga dapat mereferensikan judul di halaman lain:
[text to display](/page-name#section-name)

Gambar

Untuk menyoroti masalah atau membuat hal-hal lebih menarik, Anda dapat menambahkan gambar dan GIF animasi ke aspek permintaan pull berikut.

  • Komentar
  • File markdown
  • Halaman Wiki

Gunakan sintaks berikut untuk menambahkan gambar:

![Text](URL)
Teks dalam tanda kurung menjelaskan gambar yang ditautkan dan URL menunjuk ke lokasi gambar.

Contoh:

![Illustration to use for new users](https://azurecomcdn.azureedge.net/cvt-779fa2985e70b1ef1c34d319b505f7b4417add09948df4c5b81db2a9bad966e5/images/page/services/devops/hero-images/index-hero.jpg)


Hasil:

Jalur ke file gambar dapat menjadi jalur relatif atau jalur absolut di Git atau TFVC, sama seperti jalur ke file Markdown lain dalam tautan.

  • Jalur relatif: ![Image alt text](./image.png)
  • Jalur absolut di Git: ![Image alt text](/media/markdown-guidance/image.png)
  • Jalur absolut di TFVC: ![Image alt text]($/project/folder/media/markdown-guidance/image.png)
  • Mengubah ukuran gambar: IMAGE_URL =WIDTHxHEIGHT

    Catatan

    Pastikan untuk menyertakan spasi sebelum tanda sama dengan.

    • Contoh: ![Image alt text]($/project/folder/media/markdown-guidance/image.png =500x250)
    • Dimungkinkan juga untuk menentukan hanya LEBAR dengan meninggalkan nilai TINGGI: IMAGE_URL =WIDTHx

Daftar periksa atau daftar tugas

Daftar tugas ringan adalah cara yang bagus untuk melacak kemajuan pada tugas Anda sebagai pembuat permintaan pull atau peninjau di deskripsi PR atau di halaman wiki. Pilih toolbar Markdown untuk memulai atau menerapkan format ke teks yang dipilih.

Gunakan [ ] atau [x] untuk mendukung daftar periksa. Awali daftar periksa dengan atau -<space>1.<space> (angka apa pun).

Contoh - Terapkan daftar tugas Markdown ke daftar yang disorot

Cuplikan layar format daftar tugas Markdown dalam daftar yang disorot dalam PR.

Untuk menandai item sebagai selesai dengan mencentang kotak, Anda perlu mengedit markdown secara manual dan mengubah sintaks setelah menambahkan daftar tugas.

Cuplikan layar kotak centang untuk menandai item sebagai selesai.

Contoh - Memformat daftar sebagai daftar tugas

- [ ] A  
- [ ] B  
- [ ] C  
- [x] A  
- [x] B  
- [x] C  


Hasil:

Daftar periksa

Catatan

Daftar periksa dalam sel tabel tidak didukung.

Emoji

Di komentar permintaan pull dan halaman wiki, Anda dapat menggunakan emoji untuk menambahkan karakter dan bereaksi terhadap komentar dalam permintaan. Masukkan apa yang Anda rasakan dikelilingi oleh : karakter untuk mendapatkan emoji yang cocok dalam teks Anda. Kami mendukung sebagian besar emoji.

Contoh:

:smile:
:angry:

Hasil:

Emoji di Markdown

Untuk menghindari emoji, sertakan menggunakan karakter '.

Contoh:

`:smile:` `:)` `:angry:`

Hasil:

:smile: :) :angry:

Mengabaikan atau menghindari sintaks Markdown untuk memasukkan karakter tertentu atau harfiah

Sintaksis

Contoh/catatan

Untuk menyisipkan salah satu karakter berikut, awalan dengan &#92;(garis miring terbalik).
&#92;Backslash
&#96;, backtick
&#95;Menekankan
{}, kurung kurawal
[], tanda kurung siku
()Tanda kurung
#, tanda hash
+, plus tanda -, tanda minus (tanda hubung) ., titik
!, tanda *seru , tanda bintang

Beberapa contoh tentang menyisipkan karakter khusus:
Masukkan &#92;&#92; untuk mendapatkan \
Masukkan &#92;&#95; untuk mendapatkan _
Masukkan &#92;# untuk mendapatkan #
Masukkan &#92;( untuk mendapatkan (
Masukkan &#92;. untuk mendapatkan .
Masukkan &#92;! untuk mendapatkan!
Masukkan &#92;* untuk mendapatkan *

Lampiran

Dalam komentar permintaan pull dan halaman wiki, Anda dapat melampirkan file untuk mengilustrasikan poin Anda atau untuk memberikan penalaran yang lebih rinci di balik saran Anda. Untuk melampirkan file, seret dan letakkan ke bidang komentar, atau pengalaman edit halaman wiki. Anda juga dapat memilih penjepit kertas di kanan atas kotak komentar atau dari panel format di halaman wiki Anda.

Cuplikan layar portal Web, Permintaan Pull, Lampirkan file melalui seret dan letakkan.

Jika Anda memiliki gambar di clipboard, Anda dapat menempelkannya ke dalam kotak komentar atau halaman wiki, dan gambar tersebut dirender langsung ke halaman komentar atau wiki Anda.

Melampirkan file nonimage membuat tautan ke file di komentar Anda. Perbarui teks deskripsi di antara tanda kurung siku untuk mengubah teks yang ditampilkan di tautan. File gambar terlampir dirender langsung ke halaman komentar atau wiki Anda. Simpan atau perbarui halaman komentar atau wiki Anda dengan lampiran. Kemudian, Anda dapat melihat gambar terlampir dan memilih tautan untuk mengunduh file terlampir.

Lampiran mendukung format file berikut:

Jenis Format file
Kode CS (.cs), Extensible Markup Language (.xml), JavaScript Object Notation (.json), Hypertext Markup Language(.html, .htm), Layer (.lyr), Windows PowerShell script (.ps1), Roshal Archive (.rar), Remote Desktop Koneksi ion (.rdp), Bahasa Permintaan Terstruktur (.sql) - Catatan: Lampiran kode tidak diizinkan dalam komentar PR
File terkompresi ZIP (.zip) dan GZIP (.gz)
Dokumen Markdown (.md), Pesan Microsoft Office (.msg), Microsoft Project (.mpp), Word (.doc dan .docx), Excel (.xls, .xlsx dan .csv), dan Powerpoint (.ppt dan .pptx), file teks (.txt), dan PDF (.pdf)
Gambar PNG (.png), GIF (.gif), JPEG (baik .jpeg maupun .jpg), Ikon (.ico)
Visio VSD (.vsd dan .vsdx)
Video MOV (.mov), MP4 (.mp4)

Catatan

Tidak semua format file didukung dalam permintaan pull, seperti file Pesan Microsoft Office (.msg).

Notasi dan karakter matematika

Kami mendukung notasi KaTeX sebaris dan blokir di halaman wiki dan permintaan pull. Lihat elemen yang didukung berikut ini:

  • Simbol
  • Huruf Yunani
  • Operator matematika
  • Kekuatan dan indeks
  • Pecahan dan binomial
  • Elemen lain yang didukung KaTeX

Untuk menyertakan notasi matematika mengelilingi notasi matematika dengan $ tanda untuk sebaris dan $$ untuk blok, seperti yang ditunjukkan dalam contoh berikut:

Contoh: Karakter Yunani

$
\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta, \kappa, \lambda, \mu, \nu, \omicron, \pi, \rho, \sigma, \tau, \upsilon, \phi, ...
$  


$\Gamma,  \Delta,  \Theta, \Lambda, \Xi, \Pi, \Sigma, \Upsilon, \Phi, \Psi, \Omega$

Hasil:

Huruf Yunani

Contoh: Notasi aljabar

Area of a circle is $\pi r^2$

And, the area of a triangle is:

$$
A_{triangle}=\frac{1}{2}({b}\cdot{h})
$$

Hasil:

Notasi aljabar

Contoh: Jumlah dan Integral

$$
\sum_{i=1}^{10} t_i
$$


$$
\int_0^\infty \mathrm{e}^{-x}\,\mathrm{d}x
$$     

Hasil:

Jumlah dan Integral.

Menggunakan Markdown di wiki

Panduan berikut menunjukkan sintaks Markdown untuk digunakan di wiki Azure DevOps.

Menambahkan diagram Mermaid ke halaman wiki

Mermaid memungkinkan Anda membuat diagram dan visualisasi menggunakan teks dan kode.

Catatan

  • Tidak semua sintaks dalam konten tertaut berikut untuk jenis diagram berfungsi di Azure DevOps. Misalnya, kami tidak mendukung sebagian besar tag HTML, Font Awesome, flowchart sintaks (graph digunakan sebagai gantinya), atau LongArrow ---->.
  • Mermaid tidak didukung di browser Internet Explorer.
  • Jika Anda mengalami "Jenis diagram yang tidak didukung", fungsionalitas mungkin belum tersedia di organisasi Anda karena skema penyebaran biasa.

Wiki mendukung jenis diagram Mermaid berikut:

Untuk informasi selengkapnya, lihat catatan rilis Mermaid dan permintaan aktif di Komunitas Pengembang.

Untuk menambahkan diagram Mermaid ke halaman wiki, gunakan sintaks berikut:

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

Contoh diagram urutan

Diagram urutan adalah diagram interaksi yang menunjukkan bagaimana proses beroperasi satu sama lain dan dalam urutan mana.

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

Cuplikan layar urutan putri duyung.

Contoh bagan Gantt

Bagan Gantt merekam setiap tugas terjadwal sebagai satu bilah berkelanjutan yang meluas dari kiri ke kanan. Sumbu x mewakili waktu dan y merekam tugas yang berbeda dan urutan penyelesaiannya.

Saat Anda mengecualikan tanggal, hari, atau kumpulan tanggal khusus untuk tugas, bagan Gantt mengakomodasi perubahan tersebut dengan memperpanjang jumlah hari yang sama ke kanan, bukan dengan membuat celah di dalam tugas.

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

Cuplikan layar memperlihatkan Editor Langsung Mermaid dengan kode dan pratinjau untuk bagan Gantt.

Contoh diagram alur

Diagram alur terdiri dari simpul, bentuk dan tepi geometris, serta panah atau garis. Contoh berikut menunjukkan diagram alur menggunakan graph daripada flowchart.

Catatan

Kami tidak mendukung ----> atau flowchart sintaksis, atau tautan ke dan dari subgraph.

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

Cuplikan layar memperlihatkan Editor Langsung Mermaid dengan kode dan pratinjau untuk diagram alur.

Contoh diagram kelas

Diagram kelas adalah bagian utama dari pemodelan berorientasi objek. Diagram ini menjelaskan objek, atribut, metode, dan warisan di antara mereka.

:::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()
    }
:::

Cuplikan layar memperlihatkan Editor Langsung Mermaid dengan kode dan pratinjau untuk diagram Kelas.

Contoh diagram status

Diagram status digunakan untuk menjelaskan bagaimana status sistem dapat berubah dari satu ke yang lain.

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

Cuplikan layar memperlihatkan Editor Langsung Mermaid dengan kode dan pratinjau untuk diagram Status.

Contoh perjalanan pengguna

Diagram perjalanan pengguna menjelaskan langkah-langkah apa yang diperlukan untuk menyelesaikan tindakan atau tugas tingkat tertentu yang lebih tinggi.

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

Cuplikan layar penyajian diagram putri duyung Perjalanan Pengguna.

Contoh bagan pai

Diagram bagan pai digunakan untuk memvisualisasikan persentase dalam grafik yang dilingkari.

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

Cuplikan layar memperlihatkan Editor Langsung Mermaid dengan kode dan pratinjau untuk bagan Pai.

Contoh diagram persyaratan

Diagram persyaratan memvisualisasikan persyaratan dan koneksinya.

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

Cuplikan layar memperlihatkan Editor Langsung Mermaid dengan kode dan pratinjau untuk diagram Persyaratan.

Membuat daftar isi (TOC) untuk halaman wiki

Untuk membuat daftar isi, tambahkan [[_TOC_]]. TOC dihasilkan ketika tag ditambahkan dan setidaknya ada satu judul di halaman.

Daftar isi

[[_TOC_]] dapat ditempatkan di mana saja di halaman untuk merender daftar isi. Hanya judul Markdown yang dipertimbangkan untuk TOC (tag judul HTML tidak dipertimbangkan).

Semua tag HTML dan Markdown dilucuti dari judul sambil menambahkannya di dalam blok TOC. Lihat contoh berikut tentang bagaimana TOC dirender saat Anda menambahkan tebal dan miring ke judul.

Tag untuk TOC

Konsistensi dipertahankan dalam pemformatan TOC.

Catatan

Tag [[_TOC_]] peka huruf besar/kecil. Misalnya, [[_toc_]] mungkin tidak merender TOC. Selain itu, hanya instans pertama [[_TOC_]] yang dirender dan sisanya diabaikan.

Menambahkan tabel sub-halaman

Tambahkan daftar isi untuk sub-halaman (TOSP) ke halaman wiki Anda. Tabel ini memiliki tautan ke semua sub-halaman yang terletak di bawah halaman tempat tabel sub halaman ditampilkan.

Anda dapat menambahkan tabel sub-halaman baik dengan menyisipkan tag [[_TOSP_]] khusus secara manual atau dengan memilih dari menu Opsi lainnya. Hanya tag pertama [[_TOSP_]] yang digunakan untuk membuat tabel sub-halaman.

Cuplikan layar memperlihatkan markdown untuk halaman anak Halaman 1.

Menambahkan bagian yang dapat diciutkan

Untuk menambahkan bagian yang dapat diciutkan di halaman wiki, gunakan sintaks berikut:

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

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

Cuplikan layar memperlihatkan markdown di satu sisi dan bagaimana bagian yang dapat diciutkan di sisi lain.

Pastikan untuk menambahkan baris kosong di area berikut:

  • setelah tag penutup </summary> , jika tidak, blok markdown/code tidak ditampilkan dengan benar
  • setelah tag penutup </details> jika Anda memiliki beberapa bagian yang dapat diciutkan

Menyematkan video di halaman wiki

Untuk menyematkan video dari YouTube dan Microsoft Aliran di halaman wiki, gunakan sintaks berikut:

::: video
<iframe width="640" height="360" src="https://www.youtube.com/embed/OtqFyBA6Dbk" allowfullscreen style="border:none"><iframe>
:::

Iframe sesuai dengan blok iframe penyematan video YouTube atau Microsoft Aliran.

Akhiran ":::" diperlukan untuk mencegah jeda di halaman.

Menyematkan hasil kueri Azure Boards di wiki

Untuk menyematkan hasil kueri Azure Boards di halaman wiki sebagai tabel, gunakan sintaks berikut:

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

Contohnya:

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

Anda juga bisa menggunakan toolbar dan pemilih kueri untuk menyematkan hasil kueri di halaman wiki.

Cuplikan layar ikon Hasil Kueri yang dipilih.

Untuk informasi selengkapnya tentang cara menyalin URL kueri, yang menyediakan GUID untuk kueri, lihat Mengirim email item kueri atau berbagi URL kueri.

@mention pengguna dan g

Untuk @mention pengguna atau grup di wiki, kunci di "@" di editor wiki. Ini @mention membuka autosuggest tempat Anda dapat menyebutkan pengguna atau grup untuk mendapatkan pemberitahuan melalui email.

Cuplikan layar di Sebutkan Autosuggest.

Anda juga dapat memilih @mention dari toolbar edit.

Cuplikan layar di Sebutkan dari toolbar edit.

Saat Anda mengedit halaman langsung dalam kode, gunakan pola berikut, @<{identity-guid}>.

Lihat kunjungan halaman untuk halaman wiki

Secara otomatis, Anda melihat jumlah agregat kunjungan halaman selama 30 hari terakhir di setiap halaman. Kami mendefinisikan kunjungan halaman sebagai tampilan halaman oleh pengguna tertentu dalam interval 15 menit.

Gunakan API pagesBatch batch untuk melihat jumlah kunjungan harian ke semua halaman dengan cara yang dipaginasi. Namun, mereka tidak diurutkan berdasarkan jumlah kunjungan. Untuk data yang berusia lebih dari 30 hari, Anda bisa mendapatkan semua kunjungan halaman menggunakan REST API. Urutkan halaman ini berdasarkan jumlah kunjungan untuk mendapatkan 100 teratas. Anda dapat menyimpan kunjungan ini di dasbor atau database.

Cuplikan layar kunjungan halaman Wiki.

Masukkan tanda pound (#), lalu masukkan ID item kerja.

Menggunakan tag HTML di halaman wiki

Di halaman wiki, Anda juga dapat membuat konten kaya menggunakan tag HTML.

Tip

Anda dapat menumpuk Markdown dalam HTML, tetapi Anda harus menyertakan baris kosong antara elemen HTML dan markdown.

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

Catatan

Menempelkan konten kaya karena HTML didukung di Azure DevOps Server 2019.1 dan versi yang lebih baru.

Contoh - Video yang disematkan

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

Contoh - Format teks kaya

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

Hasil:

Cuplikan layar tampilan wiki tema Terang.

Cuplikan layar tampilan wiki tema gelap.