In an Azure DevOps Project Wiki, expandable images can be incorporated. When the image is collapsed, it looks as follows:
Expanding the "Show screenshot" text displays the image within the Wiki:
The underlying text that supports the feature is a combination of Markdown and HTML:
The <details> HTML element creates a section that can be expanded and collapsed. Everything between the opening <details> tag and closing </details> tag is hidden when the section is collapsed.
The <summary> element defines the text that the user clicks to expand or collapse the section:
<summary>Show screenshot</summary>In this example, the text displayed in the Wiki is "Show screenshot."
The image itself uses normal Markdown image syntax:
Insert Media is the alternative text for the image, while Images/02MainTrack.png is the relative path to the image stored in the Wiki repository.
The important point is that Markdown can be placed inside the <details> element. This allows the standard Markdown image reference to be wrapped inside an HTML collapsible section.
The result is a Wiki that remains concise for experienced users while allowing any user to expand individual steps and view the accompanying screenshot.
No comments :
Post a Comment