diff --git a/templates/modern/src/docfx.ts b/templates/modern/src/docfx.ts
index b48011e8438..64497873029 100644
--- a/templates/modern/src/docfx.ts
+++ b/templates/modern/src/docfx.ts
@@ -10,6 +10,7 @@ import { renderBreadcrumb, renderFooter, renderInThisArticle, renderNavbar } fro
import 'bootstrap-icons/font/bootstrap-icons.scss'
import './docfx.scss'
+import 'mathjax/es5/tex-svg-full.js'
declare global {
interface Window {
@@ -17,7 +18,7 @@ declare global {
ready?: boolean,
searchReady?: boolean,
searchResultReady?: boolean,
- };
+ }
}
}
diff --git a/templates/package-lock.json b/templates/package-lock.json
index 1f2768ceb8a..664c19316dd 100644
--- a/templates/package-lock.json
+++ b/templates/package-lock.json
@@ -23,7 +23,8 @@
"bootstrap-icons": "^1.10.3",
"highlight.js": "^11.7.0",
"lit-html": "^2.7.0",
- "lunr": "2.3.9"
+ "lunr": "2.3.9",
+ "mathjax": "^3.2.2"
},
"devDependencies": {
"@types/jest": "^29.5.0",
@@ -6573,6 +6574,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/mathjax": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz",
+ "integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw=="
+ },
"node_modules/mathml-tag-names": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -13966,6 +13972,11 @@
"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
"dev": true
},
+ "mathjax": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz",
+ "integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw=="
+ },
"mathml-tag-names": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
diff --git a/templates/package.json b/templates/package.json
index e598a4b5fe6..540c65d60a8 100644
--- a/templates/package.json
+++ b/templates/package.json
@@ -32,7 +32,8 @@
"bootstrap-icons": "^1.10.3",
"highlight.js": "^11.7.0",
"lit-html": "^2.7.0",
- "lunr": "2.3.9"
+ "lunr": "2.3.9",
+ "mathjax": "^3.2.2"
},
"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 aee74bdfa55..85fb550ed88 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
Markdown is a lightweight markup language with plain text formatting syntax. Docfx supports CommonMark compliant Markdown parsed through the Markdig parsing engine.
\n
Markdown Extensions \n
Docfx supports additional markdown syntax that provide richer content. These syntax are specific to docfx and won't be rendered elsewhere like GitHub.
\n
To use a custom markdown extension:
\n
\nUse docfx as a NuGet library: \n \n
<PackageReference Include="Microsoft.DocAsCode.App" Version="2.61.0" />\n
\n
\nConfigure the markdig markdown pipeline: \n \n
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
\n
Here is a list of markdown extensions provided by docfx by default.
\n
Alerts \n
Alerts are block quotes that render with colors and icons that indicate the significance of the content.
\n
The following alert types are supported:
\n
> [!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
\n
They look like this in rendered page:
\n
\n
Note \n
Information the user should notice even if skimming.
\n
\n
\n
Tip \n
Optional information to help a user be more successful.
\n
\n
\n
Important \n
Essential information required for user success.
\n
\n
\n
Caution \n
Negative potential consequences of an action.
\n
\n
\n
Warning \n
Dangerous certain consequences of an action.
\n
\n
Image \n
You can embed a image in your page by using the following Markdown syntax:
\n
![ <alt-text> ]( <image-link> )\n
\n
Example:
\n
![alt-text](https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main)\n
\n
This will be rendered as:
\n
\n
Include Markdown Files \n
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.
\n
You can reuse a common text snippet within a sentence using inline include:
\n
Text before [!INCLUDE [<title>](<filepath>)] and after.\n
\n
Or reuse an entire Markdown file as a block, nested within a section of an article. Block include is on its own line:
\n
[!INCLUDE [<title>](<filepath>)]\n
\n
Where <title>
is the name of the file and <filepath>
is the relative path to the file.
\n
Included markdown files needs to be excluded from build, they are usually placed in the /includes
folder.
\n
Code Snippet \n
There are several ways to include code in an article. The code snippet syntax replaces code from another file:
\n
[!code-csharp[](Program.cs)]\n
\n
You can include selected lines from the code snippet using region or line range syntax:
\n
[!code-csharp[](Program.cs#region)]\n[!code-csharp[](Program.cs#L12-L16)]\n
\n
Code snippets are indicated by using a specific link syntax described as follows:
\n
[!code-<language>[](<filepath><query-options>)]\n
\n
Where <language>
is the syntax highlighting language of the code and <filepath>
is the relative path to the markdown file.
\n
Highlight Selected Lines \n
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:
\n
[!code-csharp[](Program.cs?highlight=2,5-7,9-)]\n
\n
The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.
\n
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
Tabs \n
Tabs enable content that is multi-faceted. They allow sections of a document to contain variant content renderings and eliminates duplicate content.
\n
Here's an example of the tab experience:
\n
\n
\n
\n\nContent for Linux...
\n \n
\n\nContent for Windows...
\n \n
\n\n
The above tab group was created with the following syntax:
\n
# [Linux](#tab/linux)\n\nContent for Linux...\n\n# [Windows](#tab/windows)\n\nContent for Windows...\n\n---\n
\n
Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows:
\n
# [Tab Display Name](#tab/tab-id)\n
\n
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.
\n
Dependent tabs \n
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:
\n
\n
\n
\n\n.NET content for Linux...
\n \n
\n\n.NET content for Windows...
\n \n
\n\nTypeScript content for Linux...
\n \n
\n\nTypeScript content for Windows...
\n \n
\n\nREST API content, independent of platform...
\n \n
\n\n
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:
\n
# [.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
\n",
+ "conceptual": "\n
Markdown is a lightweight markup language with plain text formatting syntax. Docfx supports CommonMark compliant Markdown parsed through the Markdig parsing engine.
\n
Markdown Extensions \n
Docfx supports additional markdown syntax that provide richer content. These syntax are specific to docfx and won't be rendered elsewhere like GitHub.
\n
To use a custom markdown extension:
\n
\nUse docfx as a NuGet library: \n \n
<PackageReference Include="Microsoft.DocAsCode.App" Version="2.61.0" />\n
\n
\nConfigure the markdig markdown pipeline: \n \n
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
\n
Here is a list of markdown extensions provided by docfx by default.
\n
Alerts \n
Alerts are block quotes that render with colors and icons that indicate the significance of the content.
\n
The following alert types are supported:
\n
> [!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
\n
They look like this in rendered page:
\n
\n
Note \n
Information the user should notice even if skimming.
\n
\n
\n
Tip \n
Optional information to help a user be more successful.
\n
\n
\n
Important \n
Essential information required for user success.
\n
\n
\n
Caution \n
Negative potential consequences of an action.
\n
\n
\n
Warning \n
Dangerous certain consequences of an action.
\n
\n
Image \n
You can embed a image in your page by using the following Markdown syntax:
\n
![ <alt-text> ]( <image-link> )\n
\n
Example:
\n
![alt-text](https://learn.microsoft.com/en-us/media/learn/not-found/learn-not-found-light-mode.png?branch=main)\n
\n
This will be rendered as:
\n
\n
Include Markdown Files \n
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.
\n
You can reuse a common text snippet within a sentence using inline include:
\n
Text before [!INCLUDE [<title>](<filepath>)] and after.\n
\n
Or reuse an entire Markdown file as a block, nested within a section of an article. Block include is on its own line:
\n
[!INCLUDE [<title>](<filepath>)]\n
\n
Where <title>
is the name of the file and <filepath>
is the relative path to the file.
\n
Included markdown files needs to be excluded from build, they are usually placed in the /includes
folder.
\n
Code Snippet \n
There are several ways to include code in an article. The code snippet syntax replaces code from another file:
\n
[!code-csharp[](Program.cs)]\n
\n
You can include selected lines from the code snippet using region or line range syntax:
\n
[!code-csharp[](Program.cs#region)]\n[!code-csharp[](Program.cs#L12-L16)]\n
\n
Code snippets are indicated by using a specific link syntax described as follows:
\n
[!code-<language>[](<filepath><query-options>)]\n
\n
Where <language>
is the syntax highlighting language of the code and <filepath>
is the relative path to the markdown file.
\n
Highlight Selected Lines \n
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:
\n
[!code-csharp[](Program.cs?highlight=2,5-7,9-)]\n
\n
The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.
\n
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
Math Expressions \n
This sentence uses $
delimiters to show math inline: \\(\\sqrt{3x-1}+(1+x)^2\\)
\n
The Cauchy-Schwarz Inequality
\n
\\(\\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)\\)
\n
This expression uses \\$
to display a dollar sign: \\(\\sqrt{\\$4}\\)
\n
To split $ 100 in half, we calculate \\(100/2\\)
\n
Tabs \n
Tabs enable content that is multi-faceted. They allow sections of a document to contain variant content renderings and eliminates duplicate content.
\n
Here's an example of the tab experience:
\n
\n
\n
\n\nContent for Linux...
\n \n
\n\nContent for Windows...
\n \n
\n\n
The above tab group was created with the following syntax:
\n
# [Linux](#tab/linux)\n\nContent for Linux...\n\n# [Windows](#tab/windows)\n\nContent for Windows...\n\n---\n
\n
Tabs are indicated by using a specific link syntax within a Markdown header. The syntax can be described as follows:
\n
# [Tab Display Name](#tab/tab-id)\n
\n
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.
\n
Dependent tabs \n
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:
\n
\n
\n
\n\n.NET content for Linux...
\n \n
\n\n.NET content for Windows...
\n \n
\n\nTypeScript content for Linux...
\n \n
\n\nTypeScript content for Windows...
\n \n
\n\nREST API content, independent of platform...
\n \n
\n\n
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:
\n
# [.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
\n",
"type": "Conceptual",
"source": {
"remote": {
@@ -27,7 +27,7 @@
"_enableSearch": true,
"rawTitle": "
Markdown ",
"title": "Markdown",
- "wordCount": 901.0,
+ "wordCount": 949.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 39c690947a3..63dee727d13 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:
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: ![
]( ) 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 []()] 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 []()] Where is the name of the file and 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-[]()] Where is the syntax highlighting language of the code and 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=;AccountKey=;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); } } } 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. 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: 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: ![ ]( ) 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 []()] 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 []()] Where is the name of the file and 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-[]()] Where is the syntax highlighting language of the code and 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=;AccountKey=;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... ---"
},
"index.html": {
"href": "index.html",
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 67ce1fb98c5..565f27908b9 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:3de970dacbb4d5df7f45194b6e7e59112ce72473981c29d786ff8dc596e45ddb
-size 114168
+oid sha256:3b4c99ef25fc13923dc0ca3ee3f21c37184630e3572c3a5d38228ad6312b18d8
+size 116268
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 d9bb3eb36a3..723d308454b 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:9550711f1e00430e5a5dd6385225aa8f52912385ff7e69d2f2ac4e79dbab14e4
-size 1155270
+oid sha256:29552db1ef2fcba4db6b0f8a328f8c8b1e4d9b4a41954336a723ff06eb07b389
+size 1201909
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 8614f2310c3..e243998a0cd 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:d7b3d554f07d8f4413e8d1c3d995b37708b73e4693712b9e24ac0d4e827c1dde
-size 777172
+oid sha256:51a9ae387d15212320fb44583a8f9d6be1c122a60b2ff0375caba316f7079c43
+size 816663
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 9889d856b54..1bc4dcc346a 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
@@ -15,11 +15,195 @@
-
+
+
+
-
-
-
+
+
+
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 f4154808249..fa7d555ba7a 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
@@ -15,11 +15,195 @@
-
+
+
+
-
-
-
+
+
+
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 6c720992f40..3710305600a 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
@@ -15,11 +15,195 @@
-
+
+
+
-
+
-
+
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 b344849c0c6..6319abb4335 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
@@ -15,11 +15,195 @@
-
+
+
+
-
+
-
+
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 34c896cbe5a..aab6fbf1d55 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
@@ -13,11 +13,195 @@
-
+
+
+
-
+
-
+
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 7c490487c9f..239431f2714 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
@@ -13,11 +13,195 @@
-
+
+
+
-
+
-
+
@@ -224,7 +408,13 @@
Highlight Selected LinesTabs
+Math Expressions
+ This sentence uses $
delimiters to show math inline:
+
The Cauchy-Schwarz Inequality
+
+
This expression uses \$
to display a dollar sign:
+
To split $ 100 in half, we calculate
+
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:
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 fc916a82ad8..5dfb0f16507 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
@@ -13,11 +13,195 @@
-
+
+
+
-
+
-
+
diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/restapi-petstore.html.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/restapi-petstore.html.verified.html
index 95d8f38cb4f..f78f62a2958 100644
--- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/restapi-petstore.html.verified.html
+++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/restapi-petstore.html.verified.html
@@ -13,11 +13,195 @@
-
+
+
+
-
+
-
+