diff --git a/docs/docs/markdown.md b/docs/docs/markdown.md index 70108d4d9d2..12b38b0f6e7 100644 --- a/docs/docs/markdown.md +++ b/docs/docs/markdown.md @@ -130,6 +130,101 @@ $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \ $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ +## Mermaid Diagrams + +You can embed [mermaid](https://mermaid.js.org/) diagrams using markdown code block: + +Example: + + ```mermaid + flowchart LR + + A[Hard] -->|Text| B(Round) + B --> C{Decision} + C -->|One| D[Result 1] + C -->|Two| E[Result 2] + ``` + +This will be rendered as: + +```mermaid +flowchart LR + +A[Hard] -->|Text| B(Round) +B --> C{Decision} +C -->|One| D[Result 1] +C -->|Two| E[Result 2] +``` + +> [!NOTE] +> Mermaid diagrams is only supported in the `modern` template. + +There are plenty of other diagrams supported by mermaid such as: + +Pie chart + +```mermaid +pie +"Dogs" : 386 +"Cats" : 85.9 +"Rats" : 15 +``` + +Bar chart + +```mermaid +gantt + title Git Issues - days since last update + dateFormat X + axisFormat %s + + section Issue19062 + 71 : 0, 71 + section Issue19401 + 36 : 0, 36 + section Issue193 + 34 : 0, 34 + section Issue7441 + 9 : 0, 9 + section Issue1300 + 5 : 0, 5 +``` + +User Journey diagram + +```mermaid +journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me +``` + +Class diagram + +```mermaid +classDiagram +Class01 <|-- AveryLongClass : Cool +<> Class01 +Class09 --> C2 : Where am I? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +class Class10 { + <> + int id + size() +} +``` + ## Include Markdown Files Where markdown files need to be repeated in multiple articles, you can use an include file. The includes feature replace the reference with the contents of the included file at build time. diff --git a/samples/seed/articles/markdown.md b/samples/seed/articles/markdown.md index 95c2e541b9a..0570d59aa7f 100644 --- a/samples/seed/articles/markdown.md +++ b/samples/seed/articles/markdown.md @@ -2,57 +2,8 @@ [Markdown](https://daringfireball.net/projects/markdown/) is a lightweight markup language with plain text formatting syntax. Docfx supports [CommonMark](https://commonmark.org/) compliant Markdown parsed through the [Markdig](https://github.com/xoofx/markdig) parsing engine. -## Markdown Extensions - -Docfx supports additional markdown syntax that provide richer content. These syntax are specific to docfx and won't be rendered elsewhere like GitHub. - -To use a custom markdown extension: - -1. Use docfx as a NuGet library: - -```xml - -``` - -2. Configure the markdig markdown pipeline: - -```cs -var options = new BuildOptions -{ - // Enable custom markdown extensions here - ConfigureMarkdig = pipeline => pipeline.UseCitations(), -} - -await Docset.Build("docfx.json", options); -``` - -Here is a list of markdown extensions provided by docfx by default. - ## Alerts -Alerts are block quotes that render with colors and icons that indicate the significance of the content. - -The following alert types are supported: - -```markdown -> [!NOTE] -> Information the user should notice even if skimming. - -> [!TIP] -> Optional information to help a user be more successful. - -> [!IMPORTANT] -> Essential information required for user success. - -> [!CAUTION] -> Negative potential consequences of an action. - -> [!WARNING] -> Dangerous certain consequences of an action. -``` - -They look like this in rendered page: - > [!NOTE] > Information the user should notice even if skimming. @@ -70,71 +21,45 @@ They look like this in rendered page: ## Image -You can embed a image in your page by using the following Markdown syntax: - -```md -![ ]( ) -``` - -Example: -```md -![alt-text](https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main) -``` - -This will be rendered as: - ![alt-text](https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main) -## Include Markdown Files +## Mermaid Diagrams -Where markdown files need to be repeated in multiple articles, you can use an include file. The includes feature replace the reference with the contents of the included file at build time. +Flowchart -You can reuse a common text snippet within a sentence using inline include: +```mermaid +flowchart LR -```markdown -Text before [!INCLUDE [](<filepath>)] and after. +A[Hard] -->|Text| B(Round) +B --> C{Decision} +C -->|One| D[Result 1] +C -->|Two| E[Result 2] ``` -Or reuse an entire Markdown file as a block, nested within a section of an article. Block include is on its own line: +Pie chart -```markdown -[!INCLUDE [<title>](<filepath>)] +```mermaid +pie +"Dogs" : 386 +"Cats" : 85.9 +"Rats" : 15 ``` -Where `<title>` is the name of the file and `<filepath>` is the relative path to the file. - -Included markdown files needs to be excluded from build, they are usually placed in the `/includes` folder. - -## Code Snippet - -There are several ways to include code in an article. The code snippet syntax replaces code from another file: - -```markdown -[!code-csharp[](Program.cs)] +User Journey diagram + +```mermaid +journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me ``` -You can include selected lines from the code snippet using region or line range syntax: - -```markdown -[!code-csharp[](Program.cs#region)] -[!code-csharp[](Program.cs#L12-L16)] -``` - -Code snippets are indicated by using a specific link syntax described as follows: - -```markdown -[!code-<language>[](<filepath><query-options>)] -``` - -Where `<language>` is the syntax highlighting language of the code and `<filepath>` is the relative path to the markdown file. - -### Highlight Selected Lines - -Code Snippets typically include more code than necessary in order to provide context. It helps readability when you highlight the key lines that you're focusing on. To highlight key lines, use the `highlight` query options: - -```markdown -[!code-csharp[](Program.cs?highlight=2,5-7,9-)] -``` +## Code Snippet The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file. @@ -154,10 +79,6 @@ To split <span>$</span>100 in half, we calculate $100/2$ ## Tabs -Tabs enable content that is multi-faceted. They allow sections of a document to contain variant content renderings and eliminates duplicate content. - -Here's an example of the tab experience: - # [Linux](#tab/linux) Content for Linux... diff --git a/templates/modern/src/docfx.ts b/templates/modern/src/docfx.ts index 64497873029..3438e882c96 100644 --- a/templates/modern/src/docfx.ts +++ b/templates/modern/src/docfx.ts @@ -25,11 +25,10 @@ declare global { window.docfx = {} document.addEventListener('DOMContentLoaded', function() { - highlight() enableSearch() - renderMarkdown() renderFooter() + highlight() Promise.all([renderNavbar(), renderToc()]) .then(([navbar, toc]) => renderBreadcrumb([...navbar, ...toc])) diff --git a/templates/modern/src/markdown.ts b/templates/modern/src/markdown.ts index be141537935..945537f34fc 100644 --- a/templates/modern/src/markdown.ts +++ b/templates/modern/src/markdown.ts @@ -4,11 +4,14 @@ import { breakWord } from './helper' import AnchorJs from 'anchor-js' import { html, render } from 'lit-html' +import mermaid from 'mermaid' +import { getTheme } from './theme' /** * Initialize markdown rendering. */ export function renderMarkdown() { + renderMermaid() renderWordBreaks() renderTables() renderAlerts() @@ -19,6 +22,21 @@ export function renderMarkdown() { renderClickableImage() } +/** + * Render mermaid diagrams. + */ +function renderMermaid() { + document.querySelectorAll('pre code.lang-mermaid').forEach(code => { + const pre = code.parentElement + pre.classList.add('mermaid') + code.remove() + pre.appendChild(document.createTextNode(code.textContent)) + }) + + const theme = getTheme() === 'dark' ? 'dark' : 'default' + mermaid.initialize({ startOnLoad: true, deterministicIds: true, theme }) +} + /** * Add <wbr> to break long text. */ diff --git a/templates/modern/src/theme.ts b/templates/modern/src/theme.ts index eb4f322de08..e5e47feb6a4 100644 --- a/templates/modern/src/theme.ts +++ b/templates/modern/src/theme.ts @@ -16,6 +16,10 @@ function setTheme(theme: Theme) { } } +export function getTheme(): 'light' | 'dark' { + return document.documentElement.getAttribute('data-bs-theme') as 'light' | 'dark' +} + export function themePicker(refresh: () => void) { const theme = localStorage.getItem('theme') as Theme || 'auto' setTheme(theme) diff --git a/templates/package-lock.json b/templates/package-lock.json index 664c19316dd..5728c347477 100644 --- a/templates/package-lock.json +++ b/templates/package-lock.json @@ -24,7 +24,8 @@ "highlight.js": "^11.7.0", "lit-html": "^2.7.0", "lunr": "2.3.9", - "mathjax": "^3.2.2" + "mathjax": "^3.2.2", + "mermaid": "^10.1.0" }, "devDependencies": { "@types/jest": "^29.5.0", @@ -720,6 +721,11 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@braintree/sanitize-url": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz", + "integrity": "sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==" + }, "node_modules/@csstools/css-parser-algorithms": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.0.tgz", @@ -1772,6 +1778,18 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@khanacademy/simple-markdown": { + "version": "0.8.6", + "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz", + "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==", + "dependencies": { + "@types/react": ">=16.0.0" + }, + "peerDependencies": { + "react": "16.14.0", + "react-dom": "16.14.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1983,6 +2001,26 @@ "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "node_modules/@types/react": { + "version": "18.0.33", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.33.tgz", + "integrity": "sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", @@ -3332,6 +3370,14 @@ "node": ">= 0.10" } }, + "node_modules/cose-base": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz", + "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==", + "dependencies": { + "layout-base": "^1.0.0" + } + }, "node_modules/cosmiconfig": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz", @@ -3398,6 +3444,461 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/cytoscape": { + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz", + "integrity": "sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==", + "dependencies": { + "heap": "^0.2.6", + "lodash": "^4.17.21" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/cytoscape-cose-bilkent": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz", + "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==", + "dependencies": { + "cose-base": "^1.0.0" + }, + "peerDependencies": { + "cytoscape": "^3.2.0" + } + }, + "node_modules/cytoscape-fcose": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz", + "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==", + "dependencies": { + "cose-base": "^2.2.0" + }, + "peerDependencies": { + "cytoscape": "^3.2.0" + } + }, + "node_modules/cytoscape-fcose/node_modules/cose-base": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz", + "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==", + "dependencies": { + "layout-base": "^2.0.0" + } + }, + "node_modules/cytoscape-fcose/node_modules/layout-base": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz", + "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==" + }, + "node_modules/d3": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz", + "integrity": "sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==", + "dependencies": { + "d3-array": "3", + "d3-axis": "3", + "d3-brush": "3", + "d3-chord": "3", + "d3-color": "3", + "d3-contour": "4", + "d3-delaunay": "6", + "d3-dispatch": "3", + "d3-drag": "3", + "d3-dsv": "3", + "d3-ease": "3", + "d3-fetch": "3", + "d3-force": "3", + "d3-format": "3", + "d3-geo": "3", + "d3-hierarchy": "3", + "d3-interpolate": "3", + "d3-path": "3", + "d3-polygon": "3", + "d3-quadtree": "3", + "d3-random": "3", + "d3-scale": "4", + "d3-scale-chromatic": "3", + "d3-selection": "3", + "d3-shape": "3", + "d3-time": "3", + "d3-time-format": "4", + "d3-timer": "3", + "d3-transition": "3", + "d3-zoom": "3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-array": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.3.tgz", + "integrity": "sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz", + "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-brush": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz", + "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "3", + "d3-transition": "3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-chord": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz", + "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==", + "dependencies": { + "d3-path": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-contour": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz", + "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==", + "dependencies": { + "d3-array": "^3.2.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==", + "dependencies": { + "delaunator": "5" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-dispatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz", + "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-dsv": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz", + "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==", + "dependencies": { + "commander": "7", + "iconv-lite": "0.6", + "rw": "1" + }, + "bin": { + "csv2json": "bin/dsv2json.js", + "csv2tsv": "bin/dsv2dsv.js", + "dsv2dsv": "bin/dsv2dsv.js", + "dsv2json": "bin/dsv2json.js", + "json2csv": "bin/json2dsv.js", + "json2dsv": "bin/json2dsv.js", + "json2tsv": "bin/json2dsv.js", + "tsv2csv": "bin/dsv2dsv.js", + "tsv2json": "bin/dsv2json.js" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-dsv/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, + "node_modules/d3-dsv/node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-fetch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz", + "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==", + "dependencies": { + "d3-dsv": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-force": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz", + "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-quadtree": "1 - 3", + "d3-timer": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-geo": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz", + "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==", + "dependencies": { + "d3-array": "2.5.0 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-hierarchy": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz", + "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-polygon": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz", + "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-quadtree": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz", + "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-random": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz", + "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale-chromatic": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz", + "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==", + "dependencies": { + "d3-color": "1 - 3", + "d3-interpolate": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "dependencies": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "d3-selection": "2 - 3" + } + }, + "node_modules/d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/dagre-d3-es": { + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz", + "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==", + "dependencies": { + "d3": "^7.8.2", + "lodash-es": "^4.17.21" + } + }, + "node_modules/dayjs": { + "version": "1.11.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", + "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -3479,6 +3980,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delaunator": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz", + "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==", + "dependencies": { + "robust-predicates": "^3.0.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -3548,6 +4057,11 @@ "node": ">=6.0.0" } }, + "node_modules/dompurify": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz", + "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==" + }, "node_modules/easy-extender": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz", @@ -3584,6 +4098,11 @@ "integrity": "sha512-tdtr9y9oJl8VDiS+HeB6e/JDJqdDGjIk3yRfEMHm5rDnWQ/D5SbafybAayInxolbfbH6pouV5g7ZUAwE/WVtHw==", "dev": true }, + "node_modules/elkjs": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz", + "integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==" + }, "node_modules/emittery": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz", @@ -5012,6 +5531,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/heap": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz", + "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==" + }, "node_modules/highlight.js": { "version": "11.7.0", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz", @@ -5227,6 +5751,14 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/is-array-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.1.tgz", @@ -6249,8 +6781,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "4.1.0", @@ -6316,6 +6847,11 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/khroma": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.0.0.tgz", + "integrity": "sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==" + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -6340,6 +6876,11 @@ "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==", "dev": true }, + "node_modules/layout-base": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz", + "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==" + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -6479,8 +7020,12 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "node_modules/lodash.isfinite": { "version": "3.3.2", @@ -6506,6 +7051,18 @@ "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", "dev": true }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -6657,6 +7214,30 @@ "node": ">= 8" } }, + "node_modules/mermaid": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.1.0.tgz", + "integrity": "sha512-LYekSMNJygI1VnMizAPUddY95hZxOjwZxr7pODczILInO0dhQKuhXeu4sargtnuTwCilSuLS7Uiq/Qn7HTVrmA==", + "dependencies": { + "@braintree/sanitize-url": "^6.0.0", + "@khanacademy/simple-markdown": "^0.8.6", + "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.1.0", + "d3": "^7.4.0", + "dagre-d3-es": "7.0.10", + "dayjs": "^1.11.7", + "dompurify": "2.4.5", + "elkjs": "^0.8.2", + "khroma": "^2.0.0", + "lodash-es": "^4.17.21", + "non-layered-tidy-tree-layout": "^2.0.2", + "stylis": "^4.1.2", + "ts-dedent": "^2.2.0", + "uuid": "^9.0.0", + "web-worker": "^1.2.0" + } + }, "node_modules/micromatch": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", @@ -6811,6 +7392,11 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, + "node_modules/non-layered-tidy-tree-layout": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz", + "integrity": "sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==" + }, "node_modules/normalize-package-data": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz", @@ -6851,7 +7437,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -7349,6 +7934,23 @@ "node": ">= 6" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "peer": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "peer": true + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -7442,6 +8044,35 @@ "node": ">= 0.8" } }, + "node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + }, + "peerDependencies": { + "react": "^16.14.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -7751,6 +8382,11 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/robust-predicates": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz", + "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==" + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -7774,6 +8410,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" + }, "node_modules/rx": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", @@ -7798,8 +8439,7 @@ "node_modules/safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "node_modules/sass": { "version": "1.58.3", @@ -7826,6 +8466,16 @@ "dev": true, "peer": true }, + "node_modules/scheduler": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "node_modules/semver": { "version": "7.3.8", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", @@ -8600,6 +9250,11 @@ "node": ">=8" } }, + "node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -8746,6 +9401,14 @@ "node": ">=8" } }, + "node_modules/ts-dedent": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", + "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", + "engines": { + "node": ">=6.10" + } + }, "node_modules/ts-jest": { "version": "29.1.0", "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.0.tgz", @@ -8999,6 +9662,14 @@ "node": ">= 0.4.0" } }, + "node_modules/uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -9053,6 +9724,11 @@ "makeerror": "1.0.12" } }, + "node_modules/web-worker": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz", + "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==" + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -9748,6 +10424,11 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@braintree/sanitize-url": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz", + "integrity": "sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==" + }, "@csstools/css-parser-algorithms": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.0.tgz", @@ -10419,6 +11100,14 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@khanacademy/simple-markdown": { + "version": "0.8.6", + "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz", + "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==", + "requires": { + "@types/react": ">=16.0.0" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -10617,6 +11306,26 @@ "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "@types/react": { + "version": "18.0.33", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.33.tgz", + "integrity": "sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", @@ -11545,6 +12254,14 @@ "vary": "^1" } }, + "cose-base": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz", + "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==", + "requires": { + "layout-base": "^1.0.0" + } + }, "cosmiconfig": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz", @@ -11590,6 +12307,343 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "cytoscape": { + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz", + "integrity": "sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==", + "requires": { + "heap": "^0.2.6", + "lodash": "^4.17.21" + } + }, + "cytoscape-cose-bilkent": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz", + "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==", + "requires": { + "cose-base": "^1.0.0" + } + }, + "cytoscape-fcose": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz", + "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==", + "requires": { + "cose-base": "^2.2.0" + }, + "dependencies": { + "cose-base": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz", + "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==", + "requires": { + "layout-base": "^2.0.0" + } + }, + "layout-base": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz", + "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==" + } + } + }, + "d3": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz", + "integrity": "sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==", + "requires": { + "d3-array": "3", + "d3-axis": "3", + "d3-brush": "3", + "d3-chord": "3", + "d3-color": "3", + "d3-contour": "4", + "d3-delaunay": "6", + "d3-dispatch": "3", + "d3-drag": "3", + "d3-dsv": "3", + "d3-ease": "3", + "d3-fetch": "3", + "d3-force": "3", + "d3-format": "3", + "d3-geo": "3", + "d3-hierarchy": "3", + "d3-interpolate": "3", + "d3-path": "3", + "d3-polygon": "3", + "d3-quadtree": "3", + "d3-random": "3", + "d3-scale": "4", + "d3-scale-chromatic": "3", + "d3-selection": "3", + "d3-shape": "3", + "d3-time": "3", + "d3-time-format": "4", + "d3-timer": "3", + "d3-transition": "3", + "d3-zoom": "3" + } + }, + "d3-array": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.3.tgz", + "integrity": "sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==", + "requires": { + "internmap": "1 - 2" + } + }, + "d3-axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz", + "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==" + }, + "d3-brush": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz", + "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "3", + "d3-transition": "3" + } + }, + "d3-chord": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz", + "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==", + "requires": { + "d3-path": "1 - 3" + } + }, + "d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==" + }, + "d3-contour": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz", + "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==", + "requires": { + "d3-array": "^3.2.0" + } + }, + "d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==", + "requires": { + "delaunator": "5" + } + }, + "d3-dispatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz", + "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==" + }, + "d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + } + }, + "d3-dsv": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz", + "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==", + "requires": { + "commander": "7", + "iconv-lite": "0.6", + "rw": "1" + }, + "dependencies": { + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + }, + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + } + } + }, + "d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==" + }, + "d3-fetch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz", + "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==", + "requires": { + "d3-dsv": "1 - 3" + } + }, + "d3-force": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz", + "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-quadtree": "1 - 3", + "d3-timer": "1 - 3" + } + }, + "d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==" + }, + "d3-geo": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz", + "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==", + "requires": { + "d3-array": "2.5.0 - 3" + } + }, + "d3-hierarchy": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz", + "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==" + }, + "d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "requires": { + "d3-color": "1 - 3" + } + }, + "d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==" + }, + "d3-polygon": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz", + "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==" + }, + "d3-quadtree": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz", + "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==" + }, + "d3-random": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz", + "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==" + }, + "d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "requires": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + } + }, + "d3-scale-chromatic": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz", + "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==", + "requires": { + "d3-color": "1 - 3", + "d3-interpolate": "1 - 3" + } + }, + "d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==" + }, + "d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "requires": { + "d3-path": "^3.1.0" + } + }, + "d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "requires": { + "d3-array": "2 - 3" + } + }, + "d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "requires": { + "d3-time": "1 - 3" + } + }, + "d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==" + }, + "d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "requires": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + } + }, + "d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + } + }, + "dagre-d3-es": { + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz", + "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==", + "requires": { + "d3": "^7.8.2", + "lodash-es": "^4.17.21" + } + }, + "dayjs": { + "version": "1.11.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", + "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -11652,6 +12706,14 @@ "object-keys": "^1.1.1" } }, + "delaunator": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz", + "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==", + "requires": { + "robust-predicates": "^3.0.0" + } + }, "depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -11700,6 +12762,11 @@ "esutils": "^2.0.2" } }, + "dompurify": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz", + "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==" + }, "easy-extender": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz", @@ -11730,6 +12797,11 @@ "integrity": "sha512-tdtr9y9oJl8VDiS+HeB6e/JDJqdDGjIk3yRfEMHm5rDnWQ/D5SbafybAayInxolbfbH6pouV5g7ZUAwE/WVtHw==", "dev": true }, + "elkjs": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz", + "integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==" + }, "emittery": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz", @@ -12793,6 +13865,11 @@ "has-symbols": "^1.0.2" } }, + "heap": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz", + "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==" + }, "highlight.js": { "version": "11.7.0", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz", @@ -12950,6 +14027,11 @@ "side-channel": "^1.0.4" } }, + "internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==" + }, "is-array-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.1.tgz", @@ -13711,8 +14793,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "4.1.0", @@ -13766,6 +14847,11 @@ "graceful-fs": "^4.1.6" } }, + "khroma": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.0.0.tgz", + "integrity": "sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==" + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -13784,6 +14870,11 @@ "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==", "dev": true }, + "layout-base": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz", + "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==" + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13893,8 +14984,12 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "lodash.isfinite": { "version": "3.3.2", @@ -13920,6 +15015,15 @@ "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", "dev": true }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -14035,6 +15139,30 @@ "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "dev": true }, + "mermaid": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.1.0.tgz", + "integrity": "sha512-LYekSMNJygI1VnMizAPUddY95hZxOjwZxr7pODczILInO0dhQKuhXeu4sargtnuTwCilSuLS7Uiq/Qn7HTVrmA==", + "requires": { + "@braintree/sanitize-url": "^6.0.0", + "@khanacademy/simple-markdown": "^0.8.6", + "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.1.0", + "d3": "^7.4.0", + "dagre-d3-es": "7.0.10", + "dayjs": "^1.11.7", + "dompurify": "2.4.5", + "elkjs": "^0.8.2", + "khroma": "^2.0.0", + "lodash-es": "^4.17.21", + "non-layered-tidy-tree-layout": "^2.0.2", + "stylis": "^4.1.2", + "ts-dedent": "^2.2.0", + "uuid": "^9.0.0", + "web-worker": "^1.2.0" + } + }, "micromatch": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", @@ -14153,6 +15281,11 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, + "non-layered-tidy-tree-layout": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz", + "integrity": "sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==" + }, "normalize-package-data": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz", @@ -14183,8 +15316,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-inspect": { "version": "1.12.3", @@ -14525,6 +15657,25 @@ "sisteransi": "^1.0.5" } }, + "prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "peer": true, + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "peer": true + } + } + }, "punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -14576,6 +15727,29 @@ "unpipe": "1.0.0" } }, + "react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + } + }, "react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -14803,6 +15977,11 @@ "glob": "^7.1.3" } }, + "robust-predicates": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz", + "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==" + }, "run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -14812,6 +15991,11 @@ "queue-microtask": "^1.2.2" } }, + "rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" + }, "rx": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", @@ -14833,8 +16017,7 @@ "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "sass": { "version": "1.58.3", @@ -14857,6 +16040,16 @@ } } }, + "scheduler": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "semver": { "version": "7.3.8", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", @@ -15463,6 +16656,11 @@ "postcss-value-parser": "^4.1.0" } }, + "stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -15577,6 +16775,11 @@ "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==", "dev": true }, + "ts-dedent": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", + "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==" + }, "ts-jest": { "version": "29.1.0", "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.0.tgz", @@ -15730,6 +16933,11 @@ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", "dev": true }, + "uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" + }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -15780,6 +16988,11 @@ "makeerror": "1.0.12" } }, + "web-worker": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz", + "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==" + }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/templates/package.json b/templates/package.json index 540c65d60a8..416f08cd681 100644 --- a/templates/package.json +++ b/templates/package.json @@ -33,7 +33,8 @@ "highlight.js": "^11.7.0", "lit-html": "^2.7.0", "lunr": "2.3.9", - "mathjax": "^3.2.2" + "mathjax": "^3.2.2", + "mermaid": "^10.1.0" }, "devDependencies": { "@types/jest": "^29.5.0", diff --git a/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json b/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json index 85fb550ed88..44db2d537c5 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json +++ b/test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/markdown.html.view.verified.json @@ -1,5 +1,5 @@ { - "conceptual": "\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\"><a href=\"https://daringfireball.net/projects/markdown/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdown</a> is a lightweight markup language with plain text formatting syntax. Docfx supports <a href=\"https://commonmark.org/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">CommonMark</a> compliant Markdown parsed through the <a href=\"https://github.com/xoofx/markdig\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdig</a> parsing engine.</p>\n<h2 id=\"markdown-extensions\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"5\">Markdown Extensions</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"7\">Docfx supports additional markdown syntax that provide richer content. These syntax are specific to docfx and won't be rendered elsewhere like GitHub.</p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"9\">To use a custom markdown extension:</p>\n<ol sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"11\">\n<li sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"11\">Use docfx as a NuGet library:</li>\n</ol>\n<pre><code class=\"lang-xml\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"13\"><PackageReference Include="Microsoft.DocAsCode.App" Version="2.61.0" />\n</code></pre>\n<ol start=\"2\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"17\">\n<li sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"17\">Configure the markdig markdown pipeline:</li>\n</ol>\n<pre><code class=\"lang-cs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"19\">var options = new BuildOptions\n{\n // Enable custom markdown extensions here\n ConfigureMarkdig = pipeline => pipeline.UseCitations(),\n}\n\nawait Docset.Build("docfx.json", options);\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"29\">Here is a list of markdown extensions provided by docfx by default.</p>\n<h2 id=\"alerts\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"31\">Alerts</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"33\">Alerts are block quotes that render with colors and icons that indicate the significance of the content.</p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"35\">The following alert types are supported:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"37\">> [!NOTE]\n> Information the user should notice even if skimming.\n\n> [!TIP]\n> Optional information to help a user be more successful.\n\n> [!IMPORTANT]\n> Essential information required for user success.\n\n> [!CAUTION]\n> Negative potential consequences of an action.\n\n> [!WARNING]\n> Dangerous certain consequences of an action.\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"54\">They look like this in rendered page:</p>\n<div class=\"NOTE\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"56\">\n<h5>Note</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"57\">Information the user should notice even if skimming.</p>\n</div>\n<div class=\"TIP\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"59\">\n<h5>Tip</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"60\">Optional information to help a user be more successful.</p>\n</div>\n<div class=\"IMPORTANT\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"62\">\n<h5>Important</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"63\">Essential information required for user success.</p>\n</div>\n<div class=\"CAUTION\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"65\">\n<h5>Caution</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"66\">Negative potential consequences of an action.</p>\n</div>\n<div class=\"WARNING\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"68\">\n<h5>Warning</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"69\">Dangerous certain consequences of an action.</p>\n</div>\n<h2 id=\"image\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"71\">Image</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"73\">You can embed a image in your page by using the following Markdown syntax:</p>\n<pre><code class=\"lang-md\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"75\">![ <alt-text> ]( <image-link> )\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"79\">Example:</p>\n<pre><code class=\"lang-md\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"80\">![alt-text](https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main)\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"84\">This will be rendered as:</p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"86\"><img src=\"https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"86\" alt=\"alt-text\"></p>\n<h2 id=\"include-markdown-files\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"88\">Include Markdown Files</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"90\">Where markdown files need to be repeated in multiple articles, you can use an include file. The includes feature replace the reference with the contents of the included file at build time.</p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"92\">You can reuse a common text snippet within a sentence using inline include:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"94\">Text before [!INCLUDE [<title>](<filepath>)] and after.\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"98\">Or reuse an entire Markdown file as a block, nested within a section of an article. Block include is on its own line:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"100\">[!INCLUDE [<title>](<filepath>)]\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"104\">Where <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"104\"><title></code> is the name of the file and <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"104\"><filepath></code> is the relative path to the file.</p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"106\">Included markdown files needs to be excluded from build, they are usually placed in the <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"106\">/includes</code> folder.</p>\n<h2 id=\"code-snippet\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"108\">Code Snippet</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"110\">There are several ways to include code in an article. The code snippet syntax replaces code from another file:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">[!code-csharp[](Program.cs)]\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"116\">You can include selected lines from the code snippet using region or line range syntax:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"118\">[!code-csharp[](Program.cs#region)]\n[!code-csharp[](Program.cs#L12-L16)]\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"123\">Code snippets are indicated by using a specific link syntax described as follows:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"125\">[!code-<language>[](<filepath><query-options>)]\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"129\">Where <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"129\"><language></code> is the syntax highlighting language of the code and <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"129\"><filepath></code> is the relative path to the markdown file.</p>\n<h3 id=\"highlight-selected-lines\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"131\">Highlight Selected Lines</h3>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"133\">Code Snippets typically include more code than necessary in order to provide context. It helps readability when you highlight the key lines that you're focusing on. To highlight key lines, use the <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"133\">highlight</code> query options:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"135\">[!code-csharp[](Program.cs?highlight=2,5-7,9-)]\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"139\">The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.</p>\n<pre><code class=\"lang-csharp\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"141\" highlight-lines=\"2,5-7,9-\">using System;\nusing Azure;\nusing Azure.Storage;\nusing Azure.Storage.Blobs;\n\nclass Program\n{\n static void Main(string[] args)\n {\n // Define the connection string for the storage account\n string connectionString = "DefaultEndpointsProtocol=https;AccountName=<your-account-name>;AccountKey=<your-account-key>;EndpointSuffix=core.windows.net";\n\n // Create a new BlobServiceClient using the connection string\n var blobServiceClient = new BlobServiceClient(connectionString);\n\n // Create a new container\n var container = blobServiceClient.CreateBlobContainer("mycontainer");\n\n // Upload a file to the container\n using (var fileStream = File.OpenRead("path/to/file.txt"))\n {\n container.UploadBlob("file.txt", fileStream);\n }\n\n // Download the file from the container\n var downloadedBlob = container.GetBlobClient("file.txt").Download();\n using (var fileStream = File.OpenWrite("path/to/downloaded-file.txt"))\n {\n downloadedBlob.Value.Content.CopyTo(fileStream);\n }\n }\n}\n</code></pre><h2 id=\"math-expressions\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"143\">Math Expressions</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"145\">This sentence uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"145\">$</code> delimiters to show math inline: <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"145\">\\(\\sqrt{3x-1}+(1+x)^2\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"147\"><strong sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"147\">The Cauchy-Schwarz Inequality</strong></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"149\"><span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"149\">\\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"151\">This expression uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"151\">\\$</code> to display a dollar sign: <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"151\">\\(\\sqrt{\\$4}\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"153\">To split <span>$</span>100 in half, we calculate <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"153\">\\(100/2\\)</span></p>\n<h2 id=\"tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"155\">Tabs</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"157\">Tabs enable content that is multi-faceted. They allow sections of a document to contain variant content renderings and eliminates duplicate content.</p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"159\">Here's an example of the tab experience:</p>\n<div class=\"tabGroup\" id=\"tabgroup_bHGHmlrG6S\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"161\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S_linux\" data-tab=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"161\">Linux</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S_windows\" data-tab=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"165\">Windows</a>\n</li>\n</ul>\n<section id=\"tabpanel_bHGHmlrG6S_linux\" role=\"tabpanel\" data-tab=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"163\">Content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S_windows\" role=\"tabpanel\" data-tab=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"167\">Content for Windows...</p>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"171\">The above tab group was created with the following syntax:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"173\"># [Linux](#tab/linux)\n\nContent for Linux...\n\n# [Windows](#tab/windows)\n\nContent for Windows...\n\n---\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"185\">Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"187\"># [Tab Display Name](#tab/tab-id)\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"191\">A tab starts with a Markdown header, <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"191\">#</code>, and is followed by a Markdown link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"191\">[]()</code>. The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"191\">#tab/</code> and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"191\">#tab/windows</code>, all tabs with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"191\">#tab/windows</code> on the page will be selected.</p>\n<h3 id=\"dependent-tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"193\">Dependent tabs</h3>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"195\">It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action:</p>\n<div class=\"tabGroup\" id=\"tabgroup_bHGHmlrG6S-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"197\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_dotnet_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_dotnet_linux\" data-tab=\"dotnet\" data-condition=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"197\">.NET</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_dotnet_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_dotnet_windows\" data-tab=\"dotnet\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"201\">.NET</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_typescript_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_typescript_linux\" data-tab=\"typescript\" data-condition=\"linux\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"205\">TypeScript</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_typescript_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_typescript_windows\" data-tab=\"typescript\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"209\">TypeScript</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_rest\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_rest\" data-tab=\"rest\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"213\">REST API</a>\n</li>\n</ul>\n<section id=\"tabpanel_bHGHmlrG6S-1_dotnet_linux\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"199\">.NET content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_dotnet_windows\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"203\">.NET content for Windows...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_typescript_linux\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"linux\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"207\">TypeScript content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_typescript_windows\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"211\">TypeScript content for Windows...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_rest\" role=\"tabpanel\" data-tab=\"rest\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"215\">REST API content, independent of platform...</p>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"219\">Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"221\"># [.NET](#tab/dotnet/linux)\n\n.NET content for Linux...\n\n# [.NET](#tab/dotnet/windows)\n\n.NET content for Windows...\n\n# [TypeScript](#tab/typescript/linux)\n\nTypeScript content for Linux...\n\n# [TypeScript](#tab/typescript/windows)\n\nTypeScript content for Windows...\n\n# [REST API](#tab/rest)\n\nREST API content, independent of platform...\n\n---\n</code></pre>\n", + "conceptual": "\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\"><a href=\"https://daringfireball.net/projects/markdown/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdown</a> is a lightweight markup language with plain text formatting syntax. Docfx supports <a href=\"https://commonmark.org/\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">CommonMark</a> compliant Markdown parsed through the <a href=\"https://github.com/xoofx/markdig\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"3\">Markdig</a> parsing engine.</p>\n<h2 id=\"alerts\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"5\">Alerts</h2>\n<div class=\"NOTE\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"7\">\n<h5>Note</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"8\">Information the user should notice even if skimming.</p>\n</div>\n<div class=\"TIP\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"10\">\n<h5>Tip</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"11\">Optional information to help a user be more successful.</p>\n</div>\n<div class=\"IMPORTANT\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"13\">\n<h5>Important</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"14\">Essential information required for user success.</p>\n</div>\n<div class=\"CAUTION\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"16\">\n<h5>Caution</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"17\">Negative potential consequences of an action.</p>\n</div>\n<div class=\"WARNING\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"19\">\n<h5>Warning</h5>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"20\">Dangerous certain consequences of an action.</p>\n</div>\n<h2 id=\"image\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"22\">Image</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"24\"><img src=\"https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"24\" alt=\"alt-text\"></p>\n<h2 id=\"mermaid-diagrams\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"26\">Mermaid Diagrams</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"28\">Flowchart</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"30\">flowchart LR\n\nA[Hard] -->|Text| B(Round)\nB --> C{Decision}\nC -->|One| D[Result 1]\nC -->|Two| E[Result 2]\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"39\">Pie chart</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"41\">pie\n"Dogs" : 386\n"Cats" : 85.9\n"Rats" : 15\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"48\">User Journey diagram</p>\n<pre><code class=\"lang-mermaid\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"50\">journey\n title My working day\n section Go to work\n Make tea: 5: Me\n Go upstairs: 3: Me\n Do work: 1: Me, Cat\n section Go home\n Go downstairs: 5: Me\n Sit down: 3: Me\n</code></pre>\n<h2 id=\"code-snippet\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"62\">Code Snippet</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"64\">The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.</p>\n<pre><code class=\"lang-csharp\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"66\" highlight-lines=\"2,5-7,9-\">using System;\nusing Azure;\nusing Azure.Storage;\nusing Azure.Storage.Blobs;\n\nclass Program\n{\n static void Main(string[] args)\n {\n // Define the connection string for the storage account\n string connectionString = "DefaultEndpointsProtocol=https;AccountName=<your-account-name>;AccountKey=<your-account-key>;EndpointSuffix=core.windows.net";\n\n // Create a new BlobServiceClient using the connection string\n var blobServiceClient = new BlobServiceClient(connectionString);\n\n // Create a new container\n var container = blobServiceClient.CreateBlobContainer("mycontainer");\n\n // Upload a file to the container\n using (var fileStream = File.OpenRead("path/to/file.txt"))\n {\n container.UploadBlob("file.txt", fileStream);\n }\n\n // Download the file from the container\n var downloadedBlob = container.GetBlobClient("file.txt").Download();\n using (var fileStream = File.OpenWrite("path/to/downloaded-file.txt"))\n {\n downloadedBlob.Value.Content.CopyTo(fileStream);\n }\n }\n}\n</code></pre><h2 id=\"math-expressions\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"68\">Math Expressions</h2>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"70\">This sentence uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"70\">$</code> delimiters to show math inline: <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"70\">\\(\\sqrt{3x-1}+(1+x)^2\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"72\"><strong sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"72\">The Cauchy-Schwarz Inequality</strong></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"74\"><span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"74\">\\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"76\">This expression uses <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"76\">\\$</code> to display a dollar sign: <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"76\">\\(\\sqrt{\\$4}\\)</span></p>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"78\">To split <span>$</span>100 in half, we calculate <span class=\"math\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"78\">\\(100/2\\)</span></p>\n<h2 id=\"tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"80\">Tabs</h2>\n<div class=\"tabGroup\" id=\"tabgroup_bHGHmlrG6S\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"82\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S_linux\" data-tab=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"82\">Linux</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S_windows\" data-tab=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"86\">Windows</a>\n</li>\n</ul>\n<section id=\"tabpanel_bHGHmlrG6S_linux\" role=\"tabpanel\" data-tab=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"84\">Content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S_windows\" role=\"tabpanel\" data-tab=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"88\">Content for Windows...</p>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"92\">The above tab group was created with the following syntax:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"94\"># [Linux](#tab/linux)\n\nContent for Linux...\n\n# [Windows](#tab/windows)\n\nContent for Windows...\n\n---\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"106\">Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"108\"># [Tab Display Name](#tab/tab-id)\n</code></pre>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">A tab starts with a Markdown header, <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">#</code>, and is followed by a Markdown link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">[]()</code>. The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">#tab/</code> and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">#tab/windows</code>, all tabs with the link <code sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"112\">#tab/windows</code> on the page will be selected.</p>\n<h3 id=\"dependent-tabs\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"114\">Dependent tabs</h3>\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"116\">It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action:</p>\n<div class=\"tabGroup\" id=\"tabgroup_bHGHmlrG6S-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"118\">\n<ul role=\"tablist\">\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_dotnet_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_dotnet_linux\" data-tab=\"dotnet\" data-condition=\"linux\" tabindex=\"0\" aria-selected=\"true\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"118\">.NET</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_dotnet_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_dotnet_windows\" data-tab=\"dotnet\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"122\">.NET</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_typescript_linux\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_typescript_linux\" data-tab=\"typescript\" data-condition=\"linux\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"126\">TypeScript</a>\n</li>\n<li role=\"presentation\" aria-hidden=\"true\" hidden=\"hidden\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_typescript_windows\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_typescript_windows\" data-tab=\"typescript\" data-condition=\"windows\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"130\">TypeScript</a>\n</li>\n<li role=\"presentation\">\n<a href=\"#tabpanel_bHGHmlrG6S-1_rest\" role=\"tab\" aria-controls=\"tabpanel_bHGHmlrG6S-1_rest\" data-tab=\"rest\" tabindex=\"-1\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"134\">REST API</a>\n</li>\n</ul>\n<section id=\"tabpanel_bHGHmlrG6S-1_dotnet_linux\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"linux\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"120\">.NET content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_dotnet_windows\" role=\"tabpanel\" data-tab=\"dotnet\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"124\">.NET content for Windows...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_typescript_linux\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"linux\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"128\">TypeScript content for Linux...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_typescript_windows\" role=\"tabpanel\" data-tab=\"typescript\" data-condition=\"windows\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"132\">TypeScript content for Windows...</p>\n</section>\n<section id=\"tabpanel_bHGHmlrG6S-1_rest\" role=\"tabpanel\" data-tab=\"rest\" aria-hidden=\"true\" hidden=\"hidden\">\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"136\">REST API content, independent of platform...</p>\n</section>\n</div>\n\n<p sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"140\">Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done:</p>\n<pre><code class=\"lang-markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"142\"># [.NET](#tab/dotnet/linux)\n\n.NET content for Linux...\n\n# [.NET](#tab/dotnet/windows)\n\n.NET content for Windows...\n\n# [TypeScript](#tab/typescript/linux)\n\nTypeScript content for Linux...\n\n# [TypeScript](#tab/typescript/windows)\n\nTypeScript content for Windows...\n\n# [REST API](#tab/rest)\n\nREST API content, independent of platform...\n\n---\n</code></pre>\n", "type": "Conceptual", "source": { "remote": { @@ -27,7 +27,7 @@ "_enableSearch": true, "rawTitle": "<h1 id=\"markdown\" sourcefile=\"articles/markdown.md\" sourcestartlinenumber=\"1\">Markdown</h1>", "title": "Markdown", - "wordCount": 949.0, + "wordCount": 581.0, "_key": "articles/markdown.md", "_lang": "csharp", "_navKey": "~/toc.yml", diff --git a/test/docfx.Snapshot.Tests/SamplesTest.Seed/index.verified.json b/test/docfx.Snapshot.Tests/SamplesTest.Seed/index.verified.json index 63dee727d13..7b2aeeb415e 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.Seed/index.verified.json +++ b/test/docfx.Snapshot.Tests/SamplesTest.Seed/index.verified.json @@ -217,7 +217,7 @@ "articles/markdown.html": { "href": "articles/markdown.html", "title": "Markdown | docfx seed website", - "keywords": "Markdown Markdown is a lightweight markup language with plain text formatting syntax. Docfx supports CommonMark compliant Markdown parsed through the Markdig parsing engine. Markdown Extensions Docfx supports additional markdown syntax that provide richer content. These syntax are specific to docfx and won't be rendered elsewhere like GitHub. To use a custom markdown extension: Use docfx as a NuGet library: <PackageReference Include=\"Microsoft.DocAsCode.App\" Version=\"2.61.0\" /> Configure the markdig markdown pipeline: var options = new BuildOptions { // Enable custom markdown extensions here ConfigureMarkdig = pipeline => pipeline.UseCitations(), } await Docset.Build(\"docfx.json\", options); Here is a list of markdown extensions provided by docfx by default. Alerts Alerts are block quotes that render with colors and icons that indicate the significance of the content. The following alert types are supported: > [!NOTE] > Information the user should notice even if skimming. > [!TIP] > Optional information to help a user be more successful. > [!IMPORTANT] > Essential information required for user success. > [!CAUTION] > Negative potential consequences of an action. > [!WARNING] > Dangerous certain consequences of an action. They look like this in rendered page: Note Information the user should notice even if skimming. Tip Optional information to help a user be more successful. Important Essential information required for user success. Caution Negative potential consequences of an action. Warning Dangerous certain consequences of an action. Image You can embed a image in your page by using the following Markdown syntax: ![ <alt-text> ]( <image-link> ) Example: ![alt-text](https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main) This will be rendered as: Include Markdown Files Where markdown files need to be repeated in multiple articles, you can use an include file. The includes feature replace the reference with the contents of the included file at build time. You can reuse a common text snippet within a sentence using inline include: Text before [!INCLUDE [<title>](<filepath>)] and after. Or reuse an entire Markdown file as a block, nested within a section of an article. Block include is on its own line: [!INCLUDE [<title>](<filepath>)] Where <title> is the name of the file and <filepath> is the relative path to the file. Included markdown files needs to be excluded from build, they are usually placed in the /includes folder. Code Snippet There are several ways to include code in an article. The code snippet syntax replaces code from another file: [!code-csharp[](Program.cs)] You can include selected lines from the code snippet using region or line range syntax: [!code-csharp[](Program.cs#region)] [!code-csharp[](Program.cs#L12-L16)] Code snippets are indicated by using a specific link syntax described as follows: [!code-<language>[](<filepath><query-options>)] Where <language> is the syntax highlighting language of the code and <filepath> is the relative path to the markdown file. Highlight Selected Lines Code Snippets typically include more code than necessary in order to provide context. It helps readability when you highlight the key lines that you're focusing on. To highlight key lines, use the highlight query options: [!code-csharp[](Program.cs?highlight=2,5-7,9-)] The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file. using System; using Azure; using Azure.Storage; using Azure.Storage.Blobs; class Program { static void Main(string[] args) { // Define the connection string for the storage account string connectionString = \"DefaultEndpointsProtocol=https;AccountName=<your-account-name>;AccountKey=<your-account-key>;EndpointSuffix=core.windows.net\"; // Create a new BlobServiceClient using the connection string var blobServiceClient = new BlobServiceClient(connectionString); // Create a new container var container = blobServiceClient.CreateBlobContainer(\"mycontainer\"); // Upload a file to the container using (var fileStream = File.OpenRead(\"path/to/file.txt\")) { container.UploadBlob(\"file.txt\", fileStream); } // Download the file from the container var downloadedBlob = container.GetBlobClient(\"file.txt\").Download(); using (var fileStream = File.OpenWrite(\"path/to/downloaded-file.txt\")) { downloadedBlob.Value.Content.CopyTo(fileStream); } } } Math Expressions This sentence uses $ delimiters to show math inline: \\(\\sqrt{3x-1}+(1+x)^2\\) The Cauchy-Schwarz Inequality \\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\) This expression uses \\$ to display a dollar sign: \\(\\sqrt{\\$4}\\) To split $100 in half, we calculate \\(100/2\\) Tabs Tabs enable content that is multi-faceted. They allow sections of a document to contain variant content renderings and eliminates duplicate content. Here's an example of the tab experience: Linux Windows Content for Linux... Content for Windows... The above tab group was created with the following syntax: # [Linux](#tab/linux) Content for Linux... # [Windows](#tab/windows) Content for Windows... --- Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows: # [Tab Display Name](#tab/tab-id) A tab starts with a Markdown header, #, and is followed by a Markdown link [](). The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with #tab/ and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link #tab/windows, all tabs with the link #tab/windows on the page will be selected. Dependent tabs It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action: .NET .NET TypeScript TypeScript REST API .NET content for Linux... .NET content for Windows... TypeScript content for Linux... TypeScript content for Windows... REST API content, independent of platform... Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done: # [.NET](#tab/dotnet/linux) .NET content for Linux... # [.NET](#tab/dotnet/windows) .NET content for Windows... # [TypeScript](#tab/typescript/linux) TypeScript content for Linux... # [TypeScript](#tab/typescript/windows) TypeScript content for Windows... # [REST API](#tab/rest) REST API content, independent of platform... ---" + "keywords": "Markdown Markdown is a lightweight markup language with plain text formatting syntax. Docfx supports CommonMark compliant Markdown parsed through the Markdig parsing engine. Alerts Note Information the user should notice even if skimming. Tip Optional information to help a user be more successful. Important Essential information required for user success. Caution Negative potential consequences of an action. Warning Dangerous certain consequences of an action. Image Mermaid Diagrams Flowchart flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] Pie chart pie \"Dogs\" : 386 \"Cats\" : 85.9 \"Rats\" : 15 User Journey diagram journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me Code Snippet The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file. using System; using Azure; using Azure.Storage; using Azure.Storage.Blobs; class Program { static void Main(string[] args) { // Define the connection string for the storage account string connectionString = \"DefaultEndpointsProtocol=https;AccountName=<your-account-name>;AccountKey=<your-account-key>;EndpointSuffix=core.windows.net\"; // Create a new BlobServiceClient using the connection string var blobServiceClient = new BlobServiceClient(connectionString); // Create a new container var container = blobServiceClient.CreateBlobContainer(\"mycontainer\"); // Upload a file to the container using (var fileStream = File.OpenRead(\"path/to/file.txt\")) { container.UploadBlob(\"file.txt\", fileStream); } // Download the file from the container var downloadedBlob = container.GetBlobClient(\"file.txt\").Download(); using (var fileStream = File.OpenWrite(\"path/to/downloaded-file.txt\")) { downloadedBlob.Value.Content.CopyTo(fileStream); } } } Math Expressions This sentence uses $ delimiters to show math inline: \\(\\sqrt{3x-1}+(1+x)^2\\) The Cauchy-Schwarz Inequality \\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\\) This expression uses \\$ to display a dollar sign: \\(\\sqrt{\\$4}\\) To split $100 in half, we calculate \\(100/2\\) Tabs Linux Windows Content for Linux... Content for Windows... The above tab group was created with the following syntax: # [Linux](#tab/linux) Content for Linux... # [Windows](#tab/windows) Content for Windows... --- Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows: # [Tab Display Name](#tab/tab-id) A tab starts with a Markdown header, #, and is followed by a Markdown link [](). The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with #tab/ and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the page. Using the above example, when a user selects a tab with the link #tab/windows, all tabs with the link #tab/windows on the page will be selected. Dependent tabs It's possible to make the selection in one set of tabs dependent on the selection in another set of tabs. Here's an example of that in action: .NET .NET TypeScript TypeScript REST API .NET content for Linux... .NET content for Windows... TypeScript content for Linux... TypeScript content for Windows... REST API content, independent of platform... Notice how changing the Linux/Windows selection above changes the content in the .NET and TypeScript tabs. This is because the tab group defines two versions for each .NET and TypeScript, where the Windows/Linux selection above determines which version is shown for .NET/TypeScript. Here's the markup that shows how this is done: # [.NET](#tab/dotnet/linux) .NET content for Linux... # [.NET](#tab/dotnet/windows) .NET content for Windows... # [TypeScript](#tab/typescript/linux) TypeScript content for Linux... # [TypeScript](#tab/typescript/windows) TypeScript content for Windows... # [REST API](#tab/rest) REST API content, independent of platform... ---" }, "index.html": { "href": "index.html", diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/api-CatLibrary.html-term-cat.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/api-CatLibrary.html-term-cat.verified.png index bcc6c448104..1a52a1e0dc3 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/api-CatLibrary.html-term-cat.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/api-CatLibrary.html-term-cat.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1d89e0f10c693c1c69ffcb549e0d7dd8db830f91658165c544a4aefb7f428308 -size 165447 +oid sha256:06a326ce7794c638ec741b10f65cc089466b3aa11e66e0a9b31bb6c51efc1e82 +size 165400 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png index 565f27908b9..a76883e2edb 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1152x648/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3b4c99ef25fc13923dc0ca3ee3f21c37184630e3572c3a5d38228ad6312b18d8 -size 116268 +oid sha256:9f998bd9f7bbafefaf04f473f5842d923155a2faac4c0b86628d62539e3e7f31 +size 87530 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/api-CatLibrary.html-term-cat.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/api-CatLibrary.html-term-cat.verified.png index 85c22072424..12295f73ac5 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/api-CatLibrary.html-term-cat.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/api-CatLibrary.html-term-cat.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9360fa642660fd4a58aabb61f8c667712ca1928c0885492eb96cadcbbdb7ef46 -size 189445 +oid sha256:6e19bf00a031c00a14f37bbe8e47e574cc8407a9acb4388fec1ce625ded353da +size 255474 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png index 723d308454b..c3ede15b1da 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/1920x1080/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:29552db1ef2fcba4db6b0f8a328f8c8b1e4d9b4a41954336a723ff06eb07b389 -size 1201909 +oid sha256:49c1b5f7a3a13ccbc6cc75ad72bb1d44b6ad27532a9353e01a8d19f656c28637 +size 967520 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/api-CatLibrary.html-term-cat.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/api-CatLibrary.html-term-cat.verified.png index 1aca1bb942a..d4d993b80bc 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/api-CatLibrary.html-term-cat.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/api-CatLibrary.html-term-cat.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:80bf8e92368ee76defe9c3e782f37c619745dbb8b6f83fe10c204c4d0c797748 -size 260524 +oid sha256:711c0c4cf94e17493f29570c25f856e80b47ebf21a2a9088b761b18e51ab9423 +size 359160 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png index e243998a0cd..0663f8da927 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:51a9ae387d15212320fb44583a8f9d6be1c122a60b2ff0375caba316f7079c43 -size 816663 +oid sha256:339d87645412d3e2046c90b0ecaf61c5c784eb42b9293eeba2a487ca107d08a4 +size 520206 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/api-CatLibrary.html-term-cat.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/api-CatLibrary.html-term-cat.verified.png index c574f0cd0e2..1b2130e5468 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/api-CatLibrary.html-term-cat.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/api-CatLibrary.html-term-cat.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:edb58a4d13c4b4b65ec9acbb21796495d1daf6a6fb702934ce979c208616c511 -size 143118 +oid sha256:ca9893d9b0605bd588fac7b345a5dcabe34ded3bf293fdc8816981bee34501d2 +size 143083 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png index 02a1055209b..e055ba32514 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/768x600/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2ed95e8fd0bd5f0ad15dab7ea8e8a0502019ba87fffbf654478c957886585c05 -size 98760 +oid sha256:f1ddc70f981e0e63575b0f237264da6652ef899c23d819971c8ba371524da5cb +size 72668 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-BuildFromProject.Class1.html.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-BuildFromProject.Class1.html.verified.html index 1bc4dcc346a..c136f15021d 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-BuildFromProject.Class1.html.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-BuildFromProject.Class1.html.verified.html @@ -203,7 +203,7 @@ } </style></head> - <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference" data-bs-theme="light"> + <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference"> <header class="bg-body border-bottom"> <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation"> <div class="container-xxl flex-nowrap"> diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.Cat-2.html-q-cat.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.Cat-2.html-q-cat.verified.html index fa7d555ba7a..e521f87a5bb 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.Cat-2.html-q-cat.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.Cat-2.html-q-cat.verified.html @@ -203,7 +203,7 @@ } </style></head> - <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference" data-bs-theme="light"> + <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference"> <header class="bg-body border-bottom"> <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation"> <div class="container-xxl flex-nowrap"> diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html-term-cat.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html-term-cat.verified.html index 3710305600a..f5e6eb08de0 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html-term-cat.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html-term-cat.verified.html @@ -203,7 +203,7 @@ } </style></head> - <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference" data-bs-theme="light" data-search="true"> + <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference" data-search="true"> <header class="bg-body border-bottom"> <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation"> <div class="container-xxl flex-nowrap"> @@ -544,7 +544,7 @@ <h5 class="border-bottom">In this article</h5> </main> <div class="container-xxl search-results" id="search-results"> - <div class="search-list">3 results for "cat"</div> + <div class="search-list">4 results for "cat"</div> <div class="sr-items"> <div class="sr-item"> <div class="item-title"><a target="_blank" rel="noopener noreferrer" href="../api/CatLibrary.Cat-2.html?q=cat">Class <b>Cat</b><T, K> | docfx seed website</a></div> @@ -561,6 +561,11 @@ <h5 class="border-bottom">In this article</h5> <div class="item-href">http:/localhost:8089/api/<b>Cat</b>Library.ICatExtension.html</div> <div class="item-brief">...ass I<b>Cat</b>Extension Namespace CatLibrary Assembly CatLibrary.dll It's the class that contains ICat interface's extension method. This class must be public and static. Also it shouldn't be a geneic class public static class ICatExtension Inheritance object ICatExtension Inherited Members object.Equals(object) object.Equals(object, object) object.GetHashCode() object.GetType() object.MemberwiseClone() object.ReferenceEquals(object, object) object.ToString() Methods Play(ICat, ColorType) Extension method to let cat play public static void Play(this ICat icat, ContainersRefType.ColorType toy) Parameters icat ICat Cat toy ContainersRefType.ColorType Something to play Sleep(ICat, long) Extension method hint that how long the cat can sleep. public static void Sleep(this ICat icat, long hours) Parameters icat ICat The type will be extended. hours long The length of sleep....</div> </div> + <div class="sr-item"> + <div class="item-title"><a target="_blank" rel="noopener noreferrer" href="../articles/markdown.html?q=cat">Markdown | docfx seed website</a></div> + <div class="item-href">http:/localhost:8089/articles/markdown.html</div> + <div class="item-brief">... \(\sqrt{3x-1}+(1+x)^2\) The Cauchy-Schwarz Inequality \(\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)\) This expression uses \$ to display a dollar sign: \(\sqrt{\$4}\) To split $100 in half, we calculate \(100/2\) Tabs Linux Windows Content for Linux... Content for Windows... The above tab group was created with the following syntax: # [Linux](#tab/linux) Content for Linux... # [Windows](#tab/windows) Content for Windows... --- Tabs are indi<b>cat</b>ed by using a specific link syntax within a Markdown header. The syntax can be described as follows: # [Tab Display Name](#tab/tab-id) A tab starts with a Markdown header, #, and is followed by a Markdown link [](). The text of the link will become the text of the tab header, displayed to the customer. In order for the header to be recognized as a tab, the link itself must start with #tab/ and be followed by an ID representing the content of the tab. The ID is used to sync all same-ID tabs across the pag...</div> + </div> </div> </div> <footer class="border-top"> diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html.verified.html index 6319abb4335..6c919626614 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/api-CatLibrary.html.verified.html @@ -203,7 +203,7 @@ } </style></head> - <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference" data-bs-theme="light"> + <body class="tex2jax_ignore" data-layout="" data-yaml-mime="ManagedReference"> <header class="bg-body border-bottom"> <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation"> <div class="container-xxl flex-nowrap"> diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-csharp_coding_standards.html.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-csharp_coding_standards.html.verified.html index aab6fbf1d55..82d58d970b8 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-csharp_coding_standards.html.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-csharp_coding_standards.html.verified.html @@ -201,7 +201,7 @@ } </style></head> - <body class="tex2jax_ignore" data-layout="" data-yaml-mime="" data-bs-theme="light"> + <body class="tex2jax_ignore" data-layout="" data-yaml-mime=""> <header class="bg-body border-bottom"> <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation"> <div class="container-xxl flex-nowrap"> diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html index 239431f2714..fcf1e1c8997 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html @@ -201,7 +201,7 @@ } </style></head> - <body class="tex2jax_ignore" data-layout="" data-yaml-mime="" data-bs-theme="light"> + <body class="tex2jax_ignore" data-layout="" data-yaml-mime=""> <header class="bg-body border-bottom"> <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation"> <div class="container-xxl flex-nowrap"> @@ -281,45 +281,7 @@ <h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5> <h1 id="markdown">Markdown</h1> <p><a href="https://daringfireball.net/projects/markdown/" target="_blank" rel="noopener noreferrer nofollow" class="external">Markdown</a> is a lightweight markup language with plain text formatting syntax. Docfx supports <a href="https://commonmark.org/" target="_blank" rel="noopener noreferrer nofollow" class="external">CommonMark</a> compliant Markdown parsed through the <a href="https://github.com/xoofx/markdig" target="_blank" rel="noopener noreferrer nofollow" class="external">Markdig</a> parsing engine.</p> -<h2 id="markdown-extensions">Markdown Extensions<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#markdown-extensions" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2> -<p>Docfx supports additional markdown syntax that provide richer content. These syntax are specific to docfx and won't be rendered elsewhere like GitHub.</p> -<p>To use a custom markdown extension:</p> -<ol> -<li>Use docfx as a NuGet library:</li> -</ol> -<pre><code class="lang-xml hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">PackageReference</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">"Microsoft.DocAsCode.App"</span> <span class="hljs-attr">Version</span>=<span class="hljs-string">"2.61.0"</span> /></span> -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<ol start="2"> -<li>Configure the markdig markdown pipeline:</li> -</ol> -<pre><code class="lang-cs hljs language-csharp"><span class="hljs-keyword">var</span> options = <span class="hljs-keyword">new</span> BuildOptions -{ - <span class="hljs-comment">// Enable custom markdown extensions here</span> - ConfigureMarkdig = pipeline => pipeline.UseCitations(), -} - -<span class="hljs-keyword">await</span> Docset.Build(<span class="hljs-string">"docfx.json"</span>, options); -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<p>Here is a list of markdown extensions provided by docfx by default.</p> <h2 id="alerts">Alerts<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#alerts" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2> -<p>Alerts are block quotes that render with colors and icons that indicate the significance of the content.</p> -<p>The following alert types are supported:</p> -<pre><code class="lang-markdown hljs language-markdown"><span class="hljs-quote">> [!NOTE]</span> -<span class="hljs-quote">> Information the user should notice even if skimming.</span> - -<span class="hljs-quote">> [!TIP]</span> -<span class="hljs-quote">> Optional information to help a user be more successful.</span> - -<span class="hljs-quote">> [!IMPORTANT]</span> -<span class="hljs-quote">> Essential information required for user success.</span> - -<span class="hljs-quote">> [!CAUTION]</span> -<span class="hljs-quote">> Negative potential consequences of an action.</span> - -<span class="hljs-quote">> [!WARNING]</span> -<span class="hljs-quote">> Dangerous certain consequences of an action.</span> -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<p>They look like this in rendered page:</p> <div class="NOTE alert alert-info"> <h5>Note</h5> <p>Information the user should notice even if skimming.</p> @@ -341,40 +303,15 @@ <h5>Warning</h5> <p>Dangerous certain consequences of an action.</p> </div> <h2 id="image">Image<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#image" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2> -<p>You can embed a image in your page by using the following Markdown syntax:</p> -<pre><code class="lang-md hljs language-markdown">![<span class="hljs-string"> <alt-text> </span>](<span class="hljs-link"> <image-link> </span>) -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<p>Example:</p> -<pre><code class="lang-md hljs language-markdown">![<span class="hljs-string">alt-text</span>](<span class="hljs-link">https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main</span>) -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<p>This will be rendered as:</p> <p><a target="_blank" rel="noopener noreferrer nofollow" href="https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main"><img src="https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main" alt="alt-text"></a></p> -<h2 id="include-markdown-files">Include Markdown Files<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#include-markdown-files" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2> -<p>Where markdown files need to be repeated in multiple articles, you can use an include file. The includes feature replace the reference with the contents of the included file at build time.</p> -<p>You can reuse a common text snippet within a sentence using inline include:</p> -<pre><code class="lang-markdown hljs language-markdown">Text before [<span class="hljs-string">!INCLUDE [<title></span>](<span class="hljs-link"><filepath></span>)] and after. -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<p>Or reuse an entire Markdown file as a block, nested within a section of an article. Block include is on its own line:</p> -<pre><code class="lang-markdown hljs language-markdown">[<span class="hljs-string">!INCLUDE [<title></span>](<span class="hljs-link"><filepath></span>)] -</code><a class="btn border-0 code-action" title="copy" href="#"><i class="bi bi-clipboard"></i></a></pre> -<p>Where <code><title></code> is the name of the file and <code><filepath></code> is the relative path to the file.</p> -<p>Included markdown files needs to be excluded from build, they are usually placed in the <code>/includes</code> folder.</p> +<h2 id="mermaid-diagrams">Mermaid Diagrams<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#mermaid-diagrams" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h2> +<p>Flowchart</p> +<pre class="mermaid" data-processed="true"><svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 526.5 144" style="max-width: 526.5px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-0"><style>#mermaid-0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-0 .error-icon{fill:#552222;}#mermaid-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-0 .edge-thickness-normal{stroke-width:2px;}#mermaid-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-0 .marker{fill:#333333;stroke:#333333;}#mermaid-0 .marker.cross{stroke:#333333;}#mermaid-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-0 .cluster-label text{fill:#333;}#mermaid-0 .cluster-label span,#mermaid-0 p{color:#333;}#mermaid-0 .label text,#mermaid-0 span,#mermaid-0 p{fill:#333;color:#333;}#mermaid-0 .node rect,#mermaid-0 .node circle,#mermaid-0 .node ellipse,#mermaid-0 .node polygon,#mermaid-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-0 .flowchart-label text{text-anchor:middle;}#mermaid-0 .node .label{text-align:center;}#mermaid-0 .node.clickable{cursor:pointer;}#mermaid-0 .arrowheadPath{fill:#333333;}#mermaid-0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-0 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-0 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-0 .cluster text{fill:#333;}#mermaid-0 .cluster span,#mermaid-0 p{color:#333;}#mermaid-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 12 20" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0" d="M49.688,64L56.299,64C62.911,64,76.135,64,89.359,64C102.583,64,115.807,64,122.419,64L129.031,64"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-C" id="L-B-C-0" d="M191.188,64L195.354,64C199.521,64,207.854,64,216.271,64.083C224.688,64.167,233.188,64.333,237.438,64.417L241.688,64.5"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-D" id="L-C-D-0" d="M339.01,46.463L348.62,41.969C358.231,37.475,377.451,28.488,393.749,23.994C410.047,19.5,423.422,19.5,430.109,19.5L436.797,19.5"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-E" id="L-C-E-0" d="M339.01,82.537L348.62,86.864C358.231,91.191,377.451,99.846,393.749,104.173C410.047,108.5,423.422,108.5,430.109,108.5L436.797,108.5"></path></g><g class="edgeLabels"><g transform="translate(89.359375, 64)" class="edgeLabel"><g transform="translate(-14.671875, -12)" class="label"><foreignObject height="24" width="29.34375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Text</span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(396.671875, 19.5)" class="edgeLabel"><g transform="translate(-15.125, -12)" class="label"><foreignObject height="24" width="30.25"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">One</span></div></foreignObject></g></g><g transform="translate(396.671875, 108.5)" class="edgeLabel"><g transform="translate(-14.671875, -12)" class="label"><foreignObject height="24" width="29.34375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Two</span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(24.84375, 64)" id="flowchart-A-16" class="node default default flowchart-label"><rect height="39" width="49.6875" y="-19.5" x="-24.84375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-17.34375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="34.6875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Hard</span></div></foreignObject></g></g><g transform="translate(160.109375, 64)" id="flowchart-B-17" class="node default default flowchart-label"><rect height="39" width="62.15625" y="-19.5" x="-31.078125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-23.578125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="47.15625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Round</span></div></foreignObject></g></g><g transform="translate(298.8671875, 64)" id="flowchart-C-19" class="node default default flowchart-label"><polygon style="" transform="translate(-57.6796875,57.6796875)" class="label-container" points="57.6796875,0 115.359375,-57.6796875 57.6796875,-115.359375 0,-57.6796875"></polygon><g transform="translate(-30.6796875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="61.359375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Decision</span></div></foreignObject></g></g><g transform="translate(473.6484375, 19.5)" id="flowchart-D-21" class="node default default flowchart-label"><rect height="39" width="73.703125" y="-19.5" x="-36.8515625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-29.3515625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="58.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Result 1</span></div></foreignObject></g></g><g transform="translate(473.6484375, 108.5)" id="flowchart-E-23" class="node default default flowchart-label"><rect height="39" width="73.703125" y="-19.5" x="-36.8515625" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-29.3515625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="58.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Result 2</span></div></foreignObject></g></g></g></g></g></svg></pre> +<p>Pie chart</p> +<pre class="mermaid" data-processed="true"><svg aria-roledescription="pie" role="graphics-document document" viewBox="0 0 594 450" style="max-width: 594px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1"><style>#mermaid-1{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1 .error-icon{fill:#552222;}#mermaid-1 .error-text{fill:#552222;stroke:#552222;}#mermaid-1 .edge-thickness-normal{stroke-width:2px;}#mermaid-1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1 .marker{fill:#333333;stroke:#333333;}#mermaid-1 .marker.cross{stroke:#333333;}#mermaid-1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1 .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-1 .pieOuterCircle{stroke:black;stroke-width:2px;fill:none;}#mermaid-1 .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-1 .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-1 .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><g transform="translate(297,225)"><circle class="pieOuterCircle" r="186" cy="0" cx="0"></circle><path class="pieCircle" fill="#ECECFF" d="M0,-185A185,185,0,1,1,-178.36,-49.12L0,0Z"></path><path class="pieCircle" fill="#ffffde" d="M-178.36,-49.12A185,185,0,0,1,-35.587,-181.545L0,0Z"></path><path class="pieCircle" fill="hsl(80, 100%, 56.2745098039%)" d="M-35.587,-181.545A185,185,0,0,1,0,-185L0,0Z"></path><text style="text-anchor: middle;" class="slice" transform="translate(84.0833830250302,110.3700466569896)">79%</text><text style="text-anchor: middle;" class="slice" transform="translate(-94.35521539604399,-101.728343285272)">18%</text><text style="text-anchor: middle;" class="slice" transform="translate(-13.407756919887595,-138.1006681894668)">3%</text><text class="pieTitleText" y="-200" x="0"></text><g transform="translate(216,-33)" class="legend"><rect style="fill: rgb(236, 236, 255); stroke: rgb(236, 236, 255);" height="18" width="18"></rect><text y="14" x="22">Dogs</text></g><g transform="translate(216,-11)" class="legend"><rect style="fill: rgb(255, 255, 222); stroke: rgb(255, 255, 222);" height="18" width="18"></rect><text y="14" x="22">Cats</text></g><g transform="translate(216,11)" class="legend"><rect style="fill: rgb(181, 255, 32); stroke: rgb(181, 255, 32);" height="18" width="18"></rect><text y="14" x="22">Rats</text></g></g></svg></pre> +<p>User Journey diagram</p> +<pre class="mermaid" data-processed="true"><svg aria-labelledby="chart-title-mermaid-2" aria-roledescription="journey" role="graphics-document document" height="565" preserveAspectRatio="xMinYMin meet" viewBox="0 -25 1300 540" style="max-width: 1300px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-2"><title id="chart-title-mermaid-2">My working dayCatMe
Go to work
Go to workMe
Make tea
Make teaMe
Go upstairs
Go upstairsMeCat
Do work
Do work
Go home
Go homeMe
Go downstairs
Go downstairsMe
Sit down
Sit downMy working day

Code Snippet

-

There are several ways to include code in an article. The code snippet syntax replaces code from another file:

-
[!code-csharp[](Program.cs)]
-
-

You can include selected lines from the code snippet using region or line range syntax:

-
[!code-csharp[](Program.cs#region)]
-[!code-csharp[](Program.cs#L12-L16)]
-
-

Code snippets are indicated by using a specific link syntax described as follows:

-
[!code-<language>[](<filepath><query-options>)]
-
-

Where <language> is the syntax highlighting language of the code and <filepath> is the relative path to the markdown file.

-

Highlight Selected Lines

-

Code Snippets typically include more code than necessary in order to provide context. It helps readability when you highlight the key lines that you're focusing on. To highlight key lines, use the highlight query options:

-
[!code-csharp[](Program.cs?highlight=2,5-7,9-)]
-

The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.

using System;
 using Azure;
@@ -415,8 +352,6 @@ 
Highlight Selected Lines$4

 
To split $100 in half, we calculate 100/2

 
Tabs

-
Tabs enable content that is multi-faceted. They allow sections of a document to contain variant content renderings and eliminates duplicate content.

-
Here's an example of the tab experience:

 
     
 
@@ -550,4 +485,4 @@ 
In this article

     
     
   
-
\ No newline at end of file
+

\ No newline at end of file
diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/index.html.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/index.html.verified.html
index 5dfb0f16507..c3b123ab2ea 100644
--- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/index.html.verified.html
+++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/index.html.verified.html
@@ -201,7 +201,7 @@
 }
 
 
-  
+